28

AngularJS 有一个基于 DOM 的控制器继承，如 Angular Docs 中所述。

<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>

范围变量“值”仅存在于 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
});

我一直在寻找在不使用这种机制的情况下在所有范围内更新值的方法。

4

6 回答 6

50

当多个控制器需要访问相同的数据时，应该使用一个服务。您不应该依赖范围继承，因为它限制了您编写 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;
}

小提琴。

另外，我不建议使用 $rootScope 在控制器之间共享。

于 2013-03-13T15:57:27.163 回答
8

小提琴中的绑定直接在范围内的属性上。您需要的继承可以通过对范围内的对象进行数据绑定来实现。

http://jsfiddle.net/2Dtyq/

scope.shared = {}    
scope.shared.value = "Something"

而不仅仅是

scope.value= "Something"

怎么了？
在构造 DerivedController 时，传入原型的作用域通常继承自 BaseController 的作用域。
DerivedController 的作用域对象仍然没有自己的名为“值”的属性。因此，它仍然绑定到它从父范围获得的属性。
现在，如果您单击Update In Base按钮​​，它将反映在两个绑定中。当您单击Update In Derived按钮时，会在 DerviedController 的作用域上创建一个名为“value”的新属性。因此，与父级的 value 属性的绑定被破坏了。再单击Update In Base不会刷新第二个数据绑定。
将其放在单独的对象中可防止创建新属性，因此仍保持继承。

于 2013-03-13T17:51:33.830 回答
5

您不能直接引用子控制器中的字符串值。由于原型继承设置value子作用域上的属性（当您使用子控制器时创建）在子作用域上创建该属性，而不是更新父作用域属性。

您的范围不是模型，因此我们应该避免$scope使用大量属性污染变量。创建一个模型对象并在其上创建子属性。然后可以将该对象沿子控制器\范围传递。

我修改了你的jsfiddle来解释上述观点。

此外，我强烈建议您浏览此wiki 页面，以了解原型继承的麻烦。

于 2013-03-13T14:08:08.450 回答
2

看一下$broadcast方法。引用文档：

向下调度事件名称到所有子作用域（及其子作用域），通知已注册的 ng.$ro​​otScope.Scope#$on 侦听器。

于 2013-03-13T13:06:03.387 回答
0

使用对象而不是使用原始值。在你的情况下定义一个这样的对象

$scope.obj = {"value":"base"};

并尝试（obj.value）。它会起作用的。

于 2013-09-26T05:03:04.073 回答
0

发生这种情况是因为 ngController 创建了一个新的 $scope 并且 value 的引用不一样。您可以使用以下$parent属性解决该问题：

<div ng-controller="BaseController">
    <p>Base Controller Value: {{value}}</p>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{$parent.value}}</p>
    </div>
</div>

在 DerivedController 中，您可以使用类似的东西：$scope.$parent.value

但实现它的最佳方法是使用controllerAs语法。

<div ng-controller="BaseController as BaseController ">
<p>Base Controller Value: {{BaseController.value}}</p>
<div ng-controller="DerivedController">
    <p>Derived Controller Value: {{BaseController.value}}</p>
</div>

在 DerivedController 中，您可以使用类似的东西：$scope.BaseController.value

这使代码更具可读性，因为您知道所引用的控制器是什么。更多关于ngController Docs或ToddMotto挖掘 Angular 的“Controller as”语法的信息

于 2015-01-26T17:41:14.740 回答