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

Question

问题：编译语法 {{vm.names}} 吐出变量，所以我知道视图可以访问它。但是，在 ng-repeat 等指令中使用 vm.names 无效。我做了一个 console.log(typoeof()) 上面写着 "object" 所以我知道它不是一个字符串。

代码：

 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 会起作用但是很奇怪......行会出现在 table!

之外

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

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

How to get ng-repeat to work inside of a directives template

javascript

angularjs

angularjs-nvd3-directives