javascript - 如何从 ng-repeat 中的指令访问 Controller 范围？

Question

我是 AngularJS 的新用户，当我必须从 ng-repeat 中的指令访问 Controller 中的变量时，我陷入了困境。我认为它必须与范围有关。

这是我的 fiddle :http://jsfiddle.net/Zzb58/1/

“MyCtrl”作用域有两个属性:“items”，一个数组，和“thing”，一个字符串。

function MyCtrl($scope) {
    $scope.items = [{id: 'item1'}, {id: 'item2'}];    
    $scope.thing = "thing";
}

因此，如果我创建一个指令并希望它读取数组的内容，那么这个指令可以完美地工作:

<div my-directive ng-repeat="item in items" item='item'></div>

app.directive('myDirective', function () {
    return {
        restrict: 'AE',
        scope: {
            item: '=item',
        },
        template: '<div>{{ item.id }}</div>'
    }
});

HTML 已正确刷新。

但是如果我尝试从指令访问“thing”变量，它总是被读作“undefined”。

app.directive('myDirective', function () {
    return {
        restrict: 'AE',
        scope: {
            item: '=item',
            thing: '='
        },
        template: '<div>{{ item.id }} - Here is not the {{thing}}</div>'
    }
});

我认为问题必须与在 ng-repeat 中创建的子范围有关，或者可能变量未正确绑定(bind)。

但是，如果我在模板中使用 $parent.thing，变量会被读取并正确求值，但我不知道 $parent 是 ng-repeat 作用域还是 'MyCtrl' 作用域。

1) 我做错了什么？

2)为什么需要把在ng-repeat中读到的“item”元素作为HTML元素的一个属性？我最初认为“items”在父作用域中，所以当创建指令的独立作用域时，我只需要执行类似“items: '='”的操作。

Answer 1

通过为它分配一个对象，您创建了一个隔离范围。如果您设置 scope : true，您可以像在您的示例中那样使用它，否则您必须将它作为属性传递，就像您对 item 所做的那样。

http://jsfiddle.net/Zzb58/2/

有关不同模式范围的解释，您可以阅读此页面上的指令部分: https://github.com/angular/angular.js/wiki/Understanding-Scopes

通常但尤其是在处理继承范围值时，我还强烈建议使用具有属性集的对象，而不是简单的字符串变量，因为由于原型(prototype)继承的工作方式，这可能会导致整个范围分离.