Question

我内部有一个ng-repeat和一个自定义指令，我试图传递＆＃34;项目＆＃34;来自ng-repeat的变量：

<li ng-repeat="item in list">
   <div custom-directive custom-data="item"></div>
</li>

想象一个虚拟指令：

angular.module('someModule').directive('customDirective', function() {
    restrict: 'A',
    scope: {customData: '@'},
    link: function(scope) {
       console.log(scope.customData);
    }
});

如果我在指令中使用custom-data="item"然后使用customData 等于字符串＆＃34; item＆＃34;。
如果我使用custom-data="{{item}}"然后使用customData directive是item对象的字符串表示形式对其中其他对象的引用将丢失。

问题是：如何以对象的形式将item传递给我的指令？

Answer 1

在范围分配中将'@'更改为'='然后它将起作用

angular.module('someModule').directive('customDirective', function() {
    restrict: 'A',
    scope: {customData: '='},
    link: function(scope) {
       console.log(scope.customData);
    }
});

Answer 2

实际上，您可以在ng-repeat中使用自定义过滤器。

<li ng-repeat="item in list | objectFilter">
   <div custom-directive custom-data="item"></div>
</li>

在这样的控制器中

'use strict';
filters.filter("objectFilter",function(){
    return function(input){
        angular.forEach(input,function(key,val){
            if(typeof input[val].item == "string"){
                input[val].item = JSON.parse(input[val].item);
            }
        })
        return input;
    }
});

这样您就可以获得新的项目集，每个项目现在都被格式化为对象。

最后，您必须将'@'更改为'='。然后才能正常工作。只需将'@'更改为'='，就无法正常工作。

将ng-repeat变量传递给自定义指令

2 个答案: