Angular 嵌套指令通过 ng-repeat 呈现

Question

我有一个指令用于呈现单个用户的详细信息。

<user-directive></user-directive/>

我有另一个指令在用户指令上嵌套重复集合。

<!-- has some other stuff then the user collection -->
<user-directive ng-repeat="user in vm.users" user="user"></user-directive>

我已经尝试在单用户指令中设置 scope，但我似乎无法使用中继器的用户数据填充模板。

用户指令对象：

return {
          // template etc
          scope : { user: '=' }
       }

用户指令模板：

<h1>{{user.name}}</h1>

有什么想法吗？

参考fiddle here重现效果

Answer 1

参考样本here。

代码：

HTML:

<div ng-app="app" ng-controller="test as vm">
    <div test-dir="user" ng-repeat="user in vm.users">
    </div>
</div>

JS:

var app = angular.module('app', []);

app.controller('test', function ($scope) {
    var vm = this;
    vm.users = [
     { 'Name': 'Abc', 'Id': 1 }, { 'Name': 'Pqr', 'Id': 2 }, { 'Name': 'XYZ', 'Id': 3 }
    ];

    $scope = vm;
});

app.directive('testDir', function () {
    return {
        scope: { user: '=testDir' },
        template: "<div><h4>{{user.Id}}) {{user.Name}}</h4></div>"
    }
});

Angular 嵌套指令通过 ng-repeat 呈现

Angular nested directive render via ng-repeat

angularjs

angularjs-directive

angular-directive