Angular nested directive render via ng-repeat

Question

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.

can you provide a fiddle or a plunkr with hard coded user data into and array or something? — Rus Paul
– Rus Paul, Commented Feb 21, 2016 at 0:46
Perhaps you should change the name of user in vm.users (maybe to describedUser or something like that), as it seems to collide with the user from the directive — user70585
– user70585, Commented Feb 21, 2016 at 0:46
@JohnDoe that makes no sense...OP is trying to access the same user that ng-repeat creates — charlietfl
– charlietfl, Commented Feb 21, 2016 at 0:48
@charlietfl I thought the directive's user could be taking precedence, which would make the properties different, and could be excluding name. — user70585
– user70585, Commented Feb 21, 2016 at 0:50
I cannot reproduce this. Perhaps provide a plunkr or jsbin with all the code in any case. The devil's in the details. — Dennis Hackethal
– Dennis Hackethal, Commented Feb 21, 2016 at 1:27

Shashank · Accepted Answer · 2016-02-21 03:30:45Z

2

Refer the sample here.

Code:

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

answered Feb 21, 2016 at 3:30

Shashank

2,1002 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular nested directive render via ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related