0

请原谅我的不理解。

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

   <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.keywords 被填充。

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')
    });


});
4

1 回答 1

2

您需要在指令范围内设置变量并将模板设置为在标签之间进行迭代：

        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 中指令声明中传递的数组的双向绑定。

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

这是一个很好的文章，解释了指令的属性和生命周期。

我希望它有所帮助。

[编辑]

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

<ul>
     <li data-ng-repeat="tag in tags">{{tag.name}}</li>
<ul>
于 2013-10-28T02:45:12.123 回答