带有中继器的 AngularJS 指令

AngularJS directive with repeater

本文关键字：AngularJS 指令 中继器      更新时间：2023-09-26

是否可以有一个带有中继器的指令？

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

该指令如下：

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

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

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

.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

理想情况下，您应该在模板上使用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>

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

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

相关文章：