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

I have a directive that is used to render a single user's details.

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

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

I have another directive that nests a repeated collection on the user-directive.

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

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

I've tried setting the scope in the single user directive but I can't seem to get the template to populate with the user data from the repeater.

我尝试过在单一用户指令中设置范围，但是我似乎无法让模板从中继器中填充用户数据。

User directive object:

用户指令对象:

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

User directive template:

用户指令模板:

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

Any ideas?

什么好主意吗?

Refer fiddle here for reproducing the effect.

请参阅这里的小提琴复制效果。

1 个解决方案

#1

Refer the sample here.

参考示例。

Code:

代码:

HTML:

HTML:

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

JS:

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>"
    }
});

#1