前端之家收集整理的这篇文章主要介绍了
AngularJS控制器继承,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_
404_0@
AngularJS有一个基于DOM的控制器继承,如角度文档中所提到的。
<div ng-controller="BaseController">
<p>Base Controller Value: {{value}}</p>
<button ng-click="updateValue()">Update In Base</button>
<div ng-controller="DerivedController">
<p>Derived Controller Value: {{value}}</p>
<button ng-click="updateValue()">Update In Derived</button>
</div>
</div>
范围变量“value”仅存在于BaseController中。基于此,在改变BaseController或DerivedController中的方法的值时,我想要两个值都需要更新。但只有单个作用域变量被更新。
这里是一个小提琴演示相同的例子:http://jsfiddle.net/6df6S/1/
如何使一个级别上的更改传播到当前范围的直接子级和直接父级。
我们可以通过使用来实现
$scope.$watch
有没有办法做到这一点,而不使用它或任何这样的观察者?
编辑1:
通过使用$ scope。$ watch这里是我的意思
$scope.$watch("value",function () {
$scope.$broadcast("childChangeListener"); //Downwards to all children scopes
$scope.$emit("parentChangeListener"); //Upwards to all parent scopes
});
我正在寻找的方法,值将得到更新所有作用域,而不使用这样的机制。
当多个控制器需要访问相同的数据时,应使用
service。您不应该依赖范围继承,因为它限制了如何编写HTML。例如,在将来,您决定DerivedController不应该是BaseController的子级。
您的服务通常应提供一个公共API,并隐藏实现。这使得更容易重构内部。
HTML:
<div ng-controller="BaseController">
<p>Base Controller Value: {{model.getValue()}}</p>
<button ng-click="model.updateValue('Value updated from Base')">Update In Base</button>
<div ng-controller="DerivedController">
<p>Derived Controller Value: {{model.getValue()}}</p>
<button ng-click="model.updateValue('Value updated from Derived')">Update In Derived</button>
</div>
</div>
JavaScript:
app.factory('sharedModel',function () {
// private stuff
var model = {
value: "initial Value"
};
// public API
return {
getValue: function() {
return model.value;
},updateValue: function(value) {
model.value = value;
}
};
});
function BaseController($scope,sharedModel) {
$scope.model = sharedModel;
}
function DerivedController($scope,sharedModel) {
$scope.model = sharedModel;
}
Fiddle。
此外,我不建议使用$ rootScope在控制器之间共享。