如何让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