如何将集合传递给angular.js中的指令？

Question

请原谅我缺乏理解。

我将集合的名称传递给我的指令：

   <ul tag-it tag-src="preview_data.preview.extract.keywords"><li>Tag 1</li><li>Tag 2</li></ul>

指令定义如下：

app.directive('tagIt', function (){
    return  {
        restrict: 'A',
        link: function(scope,elem, attr) {

            elem.tagit();
            console.log(attr.tagSrc); //the name of my collection, but how do I access it?
        }
    }
});

如何从指令访问我的集合并确保在填充集合时调用我的指令？ 以下是how preview_data.preview.extract.keyword填充how preview_data.preview.extract.keyword 。

app.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    console.log('config');
    $routeProvider.when("/", {
        templateUrl: "/templates/addItem.html",
        controller: "AddItemController",
        resolve: {
            loadData: addItemCtrl.loadData

        }
    });
});

var addItemCtrl=app.controller("AddItemController", function ($scope, $route, $sce, Preview) {
    var title = decodeURIComponent($route.current.params.title);
    var ua = decodeURIComponent($route.current.params.ua);
    var uri = decodeURIComponent($route.current.params.uri);
    $scope.preview_data = {
        uri: uri,
        title: title,
        ua: ua
    }
    //pass parameters to web preview API

    Preview.get(uri, ua, title).then(function (data) {

        $scope.preview_data.preview = data;
        if (data.embed.html) {
            $scope.preview_data.preview.embed.html = $sce.trustAsHtml(data.embed.html);
        }
    }, function (data) {
        alert('Error: no data returned')
    });


});

Answer 1

您需要在指令范围中设置变量并将模板设置为在标记之间迭代：

        template : '<li data-ng-repeat="tag in tagSrc">{{tag.name}}</li>',
        scope : {
          tagSrc : '='
        },

并将成为这个：

   app.directive('tagIt', function (){
    return  {
        restrict: 'A',
        template : '<li data-ng-repeat="tag in tagSrc">{{tag.name}}</li>',
        scope : {
          tagSrc : '='
        },

        link: function(scope,elem, attr) {

            console.log(attr.tagSrc); 
        }
    }
});

'='属性将告诉angular使用与HTML中的指令声明中传递的数组的tw方式绑定。

这是一个带有工作示例的plunker。

这是一个很好的arcticle解释指令的属性和生命周期。

我希望它有所帮助。

[编辑]

如果您只想迭代数组，而不在列表项中创建一些不同的行为，您只需使用ng-repeat指令：

<ul>
     <li data-ng-repeat="tag in tags">{{tag.name}}</li>
<ul>