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。

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

Here is a plunker with a working example.

here是一个很好的arcticle，解释了该指令的属性和生命周期。

我希望它有所帮助。

<强> [编辑]

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

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

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

1 个答案: