如何收集传递到angular.js指令？ [英] How to pass a collection to a directive in angular.js?

问题描述

请原谅我的不理解。

我传递一个集合的名称到我的指令：

 ＆LT; UL标签是标签SRC =。preview_data preview.extract.keywords＆GT;＆LT;李＆gt;标签1＆LT; /李＆GT;＆LT ;李＆gt;标签2'; /李＆GT;＆LT; / UL＆GT;
 

该指令定义：

  app.directive（'tagIt'，函数（）{
    返回{
        限制：'A'，
        链接：功能（范围，ELEM，ATTR）{            elem.tagit（）;
            的console.log（attr.tagSrc）; //我收藏的名字，但我怎么访问它？
        }
    }
}）;
 

我如何进入我的收藏从指令，并确保被填充集合时，我的指令叫什么名字？这里是 preview_data。preview.extract.keyword S帮如何填写。

 的app.config（函数（$ routeProvider，$ locationProvider）{
    $ locationProvider.html5Mode（真）;
    的console.log（'配置'）;
    $ routeProvider.when（/，{
        templateUrl：/templates/addItem.html
        控制器：AddItemController
        解析：{
            loadData：addItemCtrl.loadData        }
    }）;
}）;VAR addItemCtrl = app.controller（AddItemController功能（$范围，$路径，$标准煤，preVIEW）{
    VAR标题=去codeURIComponent（$ route.current.params.title）;
    变种UA =去codeURIComponent（$ route.current.params.ua）;
    VAR URI =去codeURIComponent（$ route.current.params.uri）;
    $范围。preview_data = {
        URI：URI，
        标题：标题，
        UA：UA
    }
    //参数传递给网络preVIEW API    preview.get（URI，UA，标题）。然后（功能（数据）{        。$范围preview_data preVIEW =数据;
        如果（data.embed.html）{
            。$范围preview_data preview.embed.html = $ sce.trustAsHtml（data.embed.html）。
        }
    }，功能（数据）{
        警报（'错误：没有数据返回'）
    }）;
}）;
 

解决方案

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

 模板：'＆LT;李数据-NG-重复=，在tagSrc标签＆GT; {{tag.name}}＆LT; /李＆GT;，
        范围 ： {
          tagSrc：'='
        }，
 

，并会成为这样的：

  app.directive（'tagIt'，函数（）{
    返回{
        限制：'A'，
        模板：'＆LT;李数据-NG-重复=，在tagSrc标签＆GT; {{tag.name}}＆LT; /李＆GT;，
        范围 ： {
          tagSrc：'='
        }，        链接：功能（范围，ELEM，ATTR）{            的console.log（attr.tagSrc）;
        }
    }
}）;
 

在=将属性告诉到角使用TW的方式与在HTML指令申报通过阵列结合。

这里是一个工作例子plunker。

和 rel=\"nofollow\">是一个很好的arcticle地名释义指令的属性和生活循环。

我希望它能帮助。

如果你只想遍历数组，而无需创建列表中的项目的一些不同的行为，你可以简单地使用NG-重复指令：

 ＆LT; UL＆GT;
     ＆LT;李数据-NG-重复=标签中的标签＆GT; {{tag.name}}＆LT; /李＆GT;
＆LT; UL＆GT;
 

Please forgive my lack of understanding.

I pass the name of a collection to my directive:

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

The directive is defined:

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 do I access my collection from the directive and make sure my directive is called when the collection is populated? Here is how preview_data.preview.extract.keywords gets populated.

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


});

解决方案

You need to set the variable in the directive scope and set the template to iterate between the tags:

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

And will became this:

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

the '=' attribute will tells to angular to use a tw way binding with the array passed in the directive declaration in the HTML.

Here is a plunker with a working example.

And here is a good arcticle explaning the directive's attributes and life cycle.

I hope it helps.

[EDIT]

If you want just iterate the array, without creating some different behavior in the list items, you can just simply use the ng-repeat directive:

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

这篇关于如何收集传递到angular.js指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！