如何讓ng-repeat在指令模板中工作

Question

問題：編譯語法{{vm.names}}吐出變量，所以我知道該視圖有權訪問它。但是，在像ng-repeat這樣的指令中使用vm.names不起作用。我做了一個console.log（typoeof（）），它說「對象」，所以我知道它不是一個字符串。

代碼：

function nameDirective(){ 
    return { 
     template: [ 
     '{{vm.names}}', 
     '<tr ng-repeat"name in vm.names">', 
      '<td>{{name.id}}</td>', 
      '<td>{{name.fName}}</td>', 
      '<td>{{name.lName}}</td>', 
     '</tr>' 
     ].join(''), 
     "scope":{ 
     names:"=" 
     }, 
     "controller": nameDirectiveCtrl, 
     "controllerAs": 'vm' 
    }; 
    } 

    function nameDirectiveCtrl($scope) { 
    var vm = this; 

    vm.names = $scope.names; 
    } 

演示http://plnkr.co/edit/6vlqXFshSxPe5b3Wu7mf?p=preview

Answer 1

首先，你是在ng-repeat"name in vm.names"缺少=所有音符。但這不是真正的問題。

另一個問題是，如果您使用<name-directive names="vm.names"></name-directive>，則需要添加restrict: 'E'。但是這也不會呈現任何東西。

之後，我意識到你還需要replace: true。在這種情況下，ngRepeat可以工作，但奇怪的行會出現在表格外！

http://plnkr.co/edit/y8Wr2j1mLc3UFvFKo7IB?p=preview

嗯..所以這裏是解決方案。

這是極少數情況下，您應該使用指令限制爲評論。您目前的方法存在的問題是<name-directive>元素不能成爲tbody的直接子元素，因此瀏覽器會修復無效的標記，將您的元素指令移到其他地方的其他位置。

下面是固定的指令代碼註釋語法：

<table> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- directive: name-directive vm.names --> 
    </tbody> 
</table> 

和指導的樣子：

function nameDirective() { 
    return { 
     restrict: 'M', 
     template: [ 
      '<tr ng-repeat="name in vm.names">', 
       '<td>{{name.ID}}</td>', 
       '<td>{{name.fName}}</td>', 
       '<td>{{name.lName}}</td>', 
      '</tr>' 
     ].join(''), 
     scope: { 
      names: "=nameDirective" 
     }, 
     replace: true, 
     controller: nameDirectiveCtrl, 
     controllerAs: 'vm' 
    }; 
} 

演示：http://plnkr.co/edit/qTII5HdZP1gXKKZjOXTu?p=preview