重複AngularJS指令以函數作爲模板訪問`$ scope`

當指令爲其模板使用函數時，如何訪問傳入指令的ng-repeat中的對象？

，我有以下ng-repeat的指令設置：

<my-directive ng-repeat="item in list.contents" item="item"></my-directive> 

app.directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     item: '=' 
    }, 
    template: function (element, attrs) { 
     // pseudo-code 
     if (item.type == "typeA") 
     return '<li>{{ item }} one type</li>'; 
     else 
     return '<li>{{ item }} another type</li>'; 
    } 
    }; 
});

當模板{{ item }}工作正常，但我無法弄清楚如何引用item因爲它是在作爲傳遞的對象由ng-repeat。使用attrs我可以從標籤獲取值，但該值只是一個字符串。

我可以得到type作爲對象，因爲它已傳遞給ng-repeat？

來源

2014-07-02 Evil Closet Monkey

我認爲你必須修改你的方法。範圍無法從您的模板功能訪問。您可以在模板本身內使用ng-if，而不是在模板函數中使用if聲明。

例如：

指令

app.directive('myDirective',function() { 
    return { 
     restrict: 'E', 
     scope: { item: '='}, 
     template: '<div ng-if="item.type==\'one\'">' + 
         '{{item.name}}' + 
        '</div>' + 
        '<div ng-if="item.type==\'two\'">' + 
         '{{item.name}}' + 
        '</div>' 
    } 
    });

HTML

<body ng-app="app" ng-controller='ctrl'> 
     <my-directive ng-repeat="item in items" item="item"></my-directive> 
    </body>

控制器

app.controller('ctrl', function($scope) { 
     $scope.items = []; 
     $scope.items.push({type:'one', name: 'One'}); 
     $scope.items.push({type:'two', name: 'Two'}); 
    });

Demo Plunker Here

來源

2014-07-02 01:08:30 pixelbits

非常感謝！我忘記了'ng-if'被添加到核心Angular a後面。 –

重複AngularJS指令以函數作爲模板訪問`$ scope`

回答

相關問題