parent.parent 范围的双向绑定

Question

我遇到一个问题，其中具有隔离作用域的指令未通过绑定到其 parent.parent 作用域进行更改。

总而言之，我希望在指令的隔离作用域中对绑定到父属性的属性所做的更改会一直传播到该 [=84] 的父作用域=]（属性是从 parent.parent 作用域开始继承的），但事实并非如此。它只更改直接父作用域的值，而 parent.parent 作用域具有旧值。更糟糕的是，对 parent.parent 作用域属性的任何更改都不再渗透到隔离作用域或其直接父级。我知道这是 Javascript 原型继承的正常行为，Angular 作用域是建立在原型继承之上的，但是在这种双向数据绑定的情况下不需要它，我正在寻找解决方案Angular.

这是一个行为示例：http://jsfiddle.net/abeall/RmDuw/344/

我的HTML包含一个控制器div（MyController1），里面是另一个控制器div（MyController2），里面是一个指令（MyDirective）：

<div ng-controller="MyController">
    <p>MyController1: {{myMessage}} <button ng-click="change()">change</button></p>
    <div ng-controller="MyController2">
        <p>MyController2: {{myMessage}} <button ng-click="change()">change</button></p>
        <p>MyDirective: <my-directive message="myMessage"/></p>
    </div>
</div>

Javascript 在外部 MyController 作用域上定义 myMessage，内部 MyController2 作用域继承并绑定 myMessage 到 message指令，并且 MyDirective 将 message 定义为隔离范围属性。在每一层都定义了一个 change() 函数来改变本地消息属性:

var app = angular.module('myApp', []);

function MyController($scope) {
    var count = 0;
    $scope.myMessage = "from controller";
    $scope.change = function(){
        $scope.myMessage = "from controller one " + (++count);
    }
}

function MyController2($scope) {
    var count = 0;
    $scope.change = function(){
        $scope.myMessage = "from controller two " + (++count);
    }
}

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<span>Hello {{message}} <button ng-click="change()">change</button></span>',
        scope: {
            message: "="
        },
        link: function(scope, elm, attrs) {
            var count = 0;
            scope.change = function(){
                scope.message = "from directive " + (++count);
            }
        }
    };
});

您会注意到：

如果您点击MyController1的更改按钮几次，所有级别都会更新（向下继承）。
如果您随后单击 MyDirective 的更改按钮，它会更新 MyController2（向上绑定）但不会以任何方式更改 MyController1。
在这一点之后，单击 MyController1 的更改按钮不再向下渗透到 MyController2 和 MyDirective 范围，反之亦然。两人现在已经分开。就是这个问题。

所以我的问题是：

Angular 是否有办法允许绑定或继承作用域属性（在本例中为 myMessage）一直沿用到父作用域？
如果不是，我应该以什么方式将指令隔离作用域中的更改同步到 parent.parent 控制器作用域的属性？该指令无法了解其父项的结构。

Answer 1

如@Claies 所述，使用 controller as 是个好主意。通过这种方式，您可以直接了解要更新的范围，也可以轻松地在方法中传递范围。

Here is a fiddle of the results you were likely expecting

语法：ng-controller="MyController as ctrl1"

然后里面：{{ctrl1.myMessage}}或ng-click="ctrl1.change()"和click="ctrl2.change(ctrl1)"

这通过省略 $scope 依赖项来改变您编写控制器的方式，除非您出于其他原因需要它然后持有您的模型。

function MyController () {
  var count = 0
  this.myMessage = "from controller"
  this.change = function () {
    this.myMessage = "from controller one " + (++count)
  }
}

function MyController2 () {
  var count = 0
  this.change = function (ctrl) {
    ctrl.myMessage = "from controller two " + (++count)
  }
}

Answer 2

最简单的更改是在根控制器中使用 $scope.msg.mymessage 而不是 $scope.msg。

function MyController($scope) {
    var count = 0;
    $scope.msg = {};
    $scope.msg.myMessage = "from controller";
    $scope.change = function(){
        $scope.msg.myMessage = "from controller one " + (++count);
    }
}

这是一个带有预期结果的分支 fiddle（听起来很有趣）。

http://jsfiddle.net/nk5cdrmx/

parent.parent 范围的双向绑定

Two-way binding with parent.parent scope

data-binding

angularjs

angularjs-directive

angularjs-scope

isolate-scope