AngularJS控制器继承

发布时间：2020-12-17 08:34:48 所属栏目：安全来源：网络整理

导读：AngularJS有一个基于DOM的控制器继承，如角度文档中所提到的。 div ng-controller="BaseController" pBase Controller Value: {{value}}/p button ng-click="updateValue()"Update In Base/button div ng-controller="DerivedController" pDerived Controlle

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在控制器之间共享。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!