AngularJS 具有基于 DOM 的控制器继承,如 Angular 文档中所述。
<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/ http://jsfiddle.net/6df6S/1/
如何在某个级别进行更改以传播到当前范围的直接子级和直接父级。
我们可以通过使用来实现
$范围.$观察
有没有办法在不使用它或任何此类观察者的情况下做到这一点?
Edit 1:
通过使用 $scope.$watch 这就是我的意思
$scope.$watch("value", function () {
$scope.$broadcast("childChangeListener"); //Downwards to all children scopes
$scope.$emit("parentChangeListener"); //Upwards to all parent scopes
});
我正在寻找在不使用这种机制的情况下在所有范围内更新该值的方法。
当多个控制器需要访问相同的数据时,service https://docs.angularjs.org/guide/services应该使用。您不应该依赖作用域继承,因为它限制了您编写 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 http://jsfiddle.net/mrajcok/gY3uZ/.
另外,我不建议使用 $rootScope 在控制器之间共享。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)