帶直放站的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

指令應該有返回對象，它將是指令定義對象。我不確定你的指示在做什麼。

.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循環。