Angular Js ng-repeat with custom directive templateUrl

Question

I'm using a custom directive in angular js with template url the link to code is here. The Problem is ngRpeat is not working with template url if I pass ngRepeat to the element then it does not work but if I pass in the template itself it works.

add fiddle with issue – Saurabh Agrawal Feb 17 '17 at 06:51 — Saurabh Agrawal, Feb 17 '17 at 06:51

pranavjindal999 · Accepted Answer · 2017-02-17T08:23:38.233

Update:

Following is the code you've written in main.html

<search-results customers-d ="customers" ng-repeat="CM in customersD></search-results>

Following is the directive searchResults you've written:

myApp.directive('searchResults', function () {
    return {
        templateUrl: 'directives/search.html',
        scope: {
            customersD: '=',
        }
    }
});

Following is the main controller you've written:

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
    $scope.customers = [{ name:'Rishabh'},{name:'Krishna'}]
}]);

And search.html is as follows:

<a href="#" class="list-group-item">
    <h4 class="list-group-item-heading"> hi </h4>
    <p class="list-group-item-text">{{CM.name}}</p>
</a>

Now things you are doing wrong:

Missing closing quote in ng-repeat of main.html
Trying to access customersD in main.html, while no array named customersD is defined in $scope of mainController.
Trying to access CM in search.html (which is template of isolated scope directive). You can only have customersD in search.html

I think your understanding of scopes is not correct. It would be good if you read enough before asking questions here. :)

Previous Answer: You are missing closing quote in ng-repeat and using wrong variables Do as follows :

<search-results customers-d ="CM" ng-repeat="CM in customers"></search-results>

added that quote and ur variable still not showing name and aslo plz explain the reasons to change variable — Rishabh Ahuja, Feb 17 '17 at 07:33
Hey Pranav Thanks For Your Reply ! Your Second Point Says Trying to access customersD in main.html, while no array named customersD is defined in $scope of mainController. But Thats why I have defined customersD which is accessing customers object — Rishabh Ahuja, Feb 17 '17 at 09:59
`customers-d ="customers"` passes `customers` object to directive and can be accessed in directive using `customersD` but the array you are trying to ng-repeat is `customersD` which is not present in scope of mainController. So no loop is executed and nothing is displayed. — pranavjindal999, Feb 17 '17 at 10:13

score 0 · Answer 2 · answered Feb 17 '17 at 08:53

main.html

<div class="list-group">
    <search-results customers-d ="customers" ng-repeat="CM in customers"></search-results>
</div>

Directive changes in app.js

myApp.directive('searchResults', function () {
return {
    restrict : "AE",
    templateUrl: 'directives/search.html'
}
});

Angular Js ng-repeat with custom directive templateUrl

2 Answers2