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

指令应该有返回对象，它将是指令定义对象。我不确定你在指令中做了什么。

.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 2

您不能仅在指令部分返回字符串（示例中的组）。您必须返回一个指令定义对象。您可以在此处详细了解：https://docs.angularjs.org/api/ng/service/$compile

Answer 3

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

带有转发器的AngularJS指令

3 个答案: