繁体   English   中英

如何从ng-repeat中的指令访问控制器范围?

[英]How to access to the controller scope from a directive inside ng-repeat?

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

这是我的小提琴: 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”变量,它总是被读作“未定义”。

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

我认为问题必须与ng-repeat中创建的范围子项相关,或者变量未正确绑定。

但是,如果我在模板中使用$ parent.thing,则读取变量并对其进行正确计算,但我不知道该$ parent是否为ng-repeat范围或“MyCtrl”范围。

1)我做错了什么?

2)为什么需要将ng-repeat中读取的“item”元素作为HTML元素的属性? 我首先想到“items”在父范围内,所以当创建指令的隔离范围时,我只需要执行类似“items:'='”的操作。

通过为其分配对象,可以创建隔离范围。 如果设置scope : true ,则可以像在示例中一样使用它,如果不是,则必须将其作为属性传递,就像使用item

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

有关不同范围模式的说明,您可以阅读本页的指令部分: https//github.com/angular/angular.js/wiki/Understanding-Scopes

一般情况下,尤其是在使用继承的范围值时,我还强烈建议使用具有属性集的对象,而不是简单的字符串变量,因为这可能会导致整个范围内的分离,这是由于原型继承的工作原理。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM