CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-ng-repeat
Pallavi Sharma
Pallavi Sharma

Reputation: 655

why ng-repeat not working in angular js (using directives)?

I am using ng-repeat with custom directive but i am getting error .can you please tell me how to remove this error

here is my plunker http://plnkr.co/edit/uj8b3hL8T6MjoKSZyjsc?p=preview custom directive // Code goes here

angular.module('ui.directive',[]).directive('newDir',function(){
    return{
        restrict:'E',
        scope:{
            data:'='
        },
        replace:true,
        templateUrl:"pop.html",
        controller:function($scope){
           console.log($scope.data)
        },

        link :function(scope,element,attr){
            element.click(function(){



            })
        }
    }

})

Upvotes: 0

Views: 484

Answers (1)

lucuma
lucuma

Reputation: 18339

The error generated is pretty self explanatory:

Error: [$compile:tplrt] Template for directive 'newDir' must have exactly one root element. pop.html

Essentially you need to make sure your template has one root node. You've appended a br tag on the end.

Change: 

<div><h1>{{str.name}}</h1><p>{{str.category}}</p></div></br>

To:

<div><h1>{{str.name}}</h1><p>{{str.category}}</p></div>

Furthermore,

Your template is referencing str however the scope variable is data. Change your template:

<div><h1>{{data.name}}</h1><p>{{data.category}}</p></div>

http://plnkr.co/edit/eUgmU45quL0VoNLY19ek?p=preview

Upvotes: 2

Related Questions