Question

我遇到一个问题，即具有隔离范围的指令不通过绑定到其parent.parent范围进行更改。

总之，我希望对指令的隔离范围中绑定到父属性的属性所做的更改将一直传播到该属性的父作用域（该属性从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在外部myMessage范围内定义MyController，内部MyController2范围在指令上继承并将myMessage绑定到message，并且{ {1}}将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。
< / LI>
在此之后，点击MyController1的更改按钮不再向下移动到MyController1和MyController2范围，反之亦然。这两个现在彼此分开了。这就是问题所在。

所以我的问题是：

Angular是否有办法允许绑定或继承范围属性（在这种情况下为MyDirective）以便一直向下扩展父范围？
如果没有，我应该以什么方式将指令的隔离范围中的更改同步到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);
    }
}

这是一个分叉的小提琴（听起来很有趣）和预期的结果。

http://jsfiddle.net/nk5cdrmx/

与parent.parent范围

2 个答案: