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
– Saurabh Agrawal

2017-02-17 06:51:25 +00:00
Commented Feb 17, 2017 at 6:51 — Saurabh Agrawal
– Saurabh Agrawal, Commented Feb 17, 2017 at 6:51

pranavjindal999 · Accepted Answer · 2017-02-17 08:23:38Z

2

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>

edited Feb 17, 2017 at 8:23

answered Feb 17, 2017 at 7:15

pranavjindal999

3,0674 gold badges29 silver badges36 bronze badges

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

3 Comments

Rishabh Ahuja Over a year ago

added that quote and ur variable still not showing name and aslo plz explain the reasons to change variable

Rishabh Ahuja Over a year ago

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

pranavjindal999 Over a year ago

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.

Pramod Patil · Accepted Answer · 2017-02-17 08:53:02Z

0

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

answered Feb 17, 2017 at 8:53

Pramod Patil

2,7632 gold badges16 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular Js ng-repeat with custom directive templateUrl

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related