对指令和父范围进行AngularJS ng-repeat

Question

我有一个重复的指令，它继承了它的父控制器的范围。

    <div ng-controller="myController">
        {{ message }}
        <person ng-repeat="person in persons"></person>
    </div>

app.controller('myController', function ($scope) {
    $scope.message = "A";
    $scope.persons = { 1: {}, 2: {}, 3: {} }
});

但是当我更改指令内的范围时，父范围不会更新。

app.controller('PersonController', function ($scope) {
    $scope.message = "B";
});

app.directive("person", function () {
    return {
        restrict: 'E',
        transclude: true,
        controller: 'PersonController',
        template: '{{ message }}'
    };
});

http://jsfiddle.net/hientc/L8xo9338/1/

只有当我对指令进行ng-repeat时才会发生这种情况。 如果删除ng-repeat，则更新指令范围时会更新父作用域。

如何为ng-repeat进行双向绑定工作？

Answer 1

将message实例更改为message.value 。

HTML：

<div ng-app="myApp">
    <div ng-controller="myController">
        {{ message.value }}
        <person ng-repeat="person in persons"></person>
    </div>
</div>

JS：

// Inside myController

$scope.message = {
    value: "A"
};
// Inside PersonController
app.controller('PersonController', function ($scope) {
    $scope.message.value = "B";
});

http://jsfiddle.net/L8xo9338/2/

这与范围如何使用javascript的prototype继承有关。 请参阅AngularJS中范围原型/原型继承的细微差别是什么？ 作出解释。

实质上，当您创建对象时，范围引用相同的对象，以便更新它。

这可以用$scope.$parent.message = "B";替代完成$scope.$parent.message = "B"; 。 但是，对我来说它不太干净。

您甚至可以将其绑定到模型，例如<input ng-model="message.value"> ，它将在父级和子级中更新。

Answer 2

我认为您的问题与JavaScript的原型继承有关，当您阅读或编写成员时，它的行为会有所不同：

您的指令创建一个新范围并尝试在其上设置message成员。 由于该成员不存在，因此它是在该作用域上创建的（而不是如您所想，可以在已具有此成员的父作用域上设置）。 这意味着message成员是在“错误”范围内创建的（对于您要执行的操作）。

写行为与读行为不同。 如果您尝试从父作用域上的子作用域访问属性，则会冒泡，直到找到该属性，否则将是undefined 。

这可以通过方法设置值来解决。 此方法应放在具有需要设置的成员的范围上。 在你的情况下，这样的东西应该工作：

在myController ：

$scope.SetMessage = function(m)
{
    $scope.message = m;
}

并且PersonController应该更改如下：

app.controller('PersonController', function ($scope)
{
    $scope.SetMessage("B");
});

您也可以通过$scope.$parent访问父作用域，它可能暂时可用，但只要添加/删除作用域就会中断（例如，通过将其嵌套在另一个指令中）。 使用方法更灵活。 顺便说一下：这就是为什么它没有使用ng-repeat ，因为这为每个项目创建了一个新的范围。

Answer 3

首先，你的person指令不会创建任何新的范围内，重复使用相同的范围是其父母。 这就是为什么你的指令在不使用ng-repeat

其次， ng-repeat 创建了新的范围 。 根据ng-repeat文件

每个模板实例都有自己的范围，其中给定的循环变量设置为当前集合项

因此，当您使用ng-repeat ，即使您的指令仍未创建新范围，它也会共享由ng-repeat创建的新范围。 这就是为什么在指令中设置message不再影响父范围的原因。

希望这可以帮助！ :)