1

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

总之，我希望对绑定到父属性的指令隔离范围中的属性所做的更改会一直传播到该属性的父范围（该属性是从 parent.parent 范围继承的） ，但事实并非如此。它仅更改直接父范围的值，而 parent.parent 范围具有旧值。更糟糕的是，对 parent.parent 范围属性的任何更改都不再渗透到隔离范围或其直接父级。我知道这是构建 Angular 范围的 Javascript 原型继承的正常行为，但在这种双向数据绑定的情况下不需要它，我正在寻找 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>

JavascriptmyMessage在外部MyController作用域上定义，内部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 控制器范围的属性？该指令无法了解其父项的结构。

4

2 回答 2

1

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

这是您可能期望的结果的小提琴

句法： 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)
  }
}
于 2015-07-21T18:22:18.477 回答
0

最简单的更改是在根控制器中使用 $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/

于 2015-07-21T18:23:04.523 回答