AngularJS 带转发器的指令

Question

是否可以在指令中包含中继器？

我想要的是创建一个按字母顺序排列的人员列表，其中针对每组字母过滤人员列表。

指令如下：

.directive('azList', ['$compile', function($compile){

    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('');
    var group = '';
    letters.forEach(function(letter){
        group = group + '\
        <div class="list__group" id="list_' + letter + '">\
            <h4 class="list__header">' + letter + '</h4>\
            <ul class="list__items">\
                <li ng-repeat="person in people | orderBy: [{{person.lastname}}, {{person.firstname}}] | firstLetter:{{person.lastname}}:' + letter + '">\
                    <a ui-sref="people.details({ personId: {{person.id}} })">\
                        <span class="list__icon"><img src="img/avatar.png"></span>\
                        <span class="list__text">\
                            <span class="list__text__name">{{person.firstname}} <b>{{person.lastname}}</b></span>\
                        </span>\
                    </a>\
                </li>\
            </ul>\
        </div>';
    });

    return {
        restrict: 'AECM',
        template: group
    };

}])

然后是过滤器：

.filter('firstLetter', function () {
    return function (input, key, letter) {
        input = input || [];
        var out = [];
        input.forEach(function (item) {
            if(letter == '#') {
                if ( !isNaN(parseInt(item[key][0])) )
                    out.push(item);
            }
            else if (item[key][0].toLowerCase() == letter.toLowerCase()) {
                out.push(item);
            }
        });
        return out;
    }
});

然后我像这样使用它：

<az-list></az-list>

但是我只是得到了字母列表，它并没有调用中继器...

Answer 1

您不能 return 指令部分中只有一个字符串（在您的示例中为组）。您必须 return 指令定义对象。您可以在这里阅读更多相关信息：https://docs.angularjs.org/api/ng/service/$compile

Answer 2

指令应具有 return 对象，该对象将成为指令定义对象。我不确定你在你的指令中做了什么。

.directive('azList', ['$compile', function($compile){
  return {
     restrict: 'AECM',
     template: '<div>myTempolate</div>'
  }
})];

此外，您在 ng-repeat 上应用过滤器时确实在少数地方使用了 {{}}，您应该将其更改为以下内容。

    <div class="list__group" id="list_' + letter + '">\
        <h4 class="list__header">' + letter + '</h4>\
        <ul class="list__items">\
            <li ng-repeat="person in people | orderBy: [person.lastname, person.firstname] | firstLetter:person.lastname:' + letter + '">\
                <a ui-sref="people.details({ personId: person.id })">\
                    <span class="list__icon"><img src="img/avatar.png"></span>\
                    <span class="list__text">\
                        <span class="list__text__name">{{person.firstname}} <b>{{person.lastname}}</b></span>\
                    </span>\
                </a>\
            </li>\
        </ul>\
    </div>';

观看演示 plunkr here

理想情况下，您应该在模板上使用 ng-repeat 多次重复该模板。仅生成模板的指令没有意义，因为 ng-repeat 已经存在。

ng-repeat版本

<div ng-repeat="letter in letters" class="list__group" id="list_{{letter}}">
    <h4 class="list__header">{{letter}}</h4>
    <ul class="list__items">
        <li ng-repeat="person in people | orderBy: [person.lastname, person.firstname] | firstLetter:person.lastname:letter">
            <a ui-sref="people.details({ personId: person.id })">
                <span class="list__icon"><img src="img/avatar.png"></span>
                <span class="list__text">
                  <span class="list__text__name">
                    {{person.firstname}} 
                   <b>{{person.lastname}}</b></span>
                </span>
            </a>
        </li>
    </ul>
</div>

Answer 3

我看到你的代码没有任何 people。所以它不会进入 ng-repeat 循环。

AngularJS 带转发器的指令

AngularJS directive with repeater

javascript

angularjs

angularjs-directive

angularjs-filter