Reputation: 191
Lets say there are 2 directive components
1) List
2) Profile
"List" should accept the data in the form of Object notation passed to it through the controller and display the HTML or Directive components in the form of List. For example
var obj =[
{
component ://profile directive something like<Profile name="Shehzad" age=29/>
},
{
component ://news directive something like<News content="Headlines" />
}
];
And the Profile directive contains the following UI
<div>
<div> name is {{name}}</div>
<div> age is {{age}}</div>
</div>
Similarly News directive will contain the following UI
<div>
<div>{{content}}</div>
</div>
I want the List component to read the "obj" and render the Profile and news directive in a List view. Can anyone plz explain how the above thing can be achieved in angularjs
Here is the plunker link:
http://plnkr.co/edit/I1kJhYCqMkSD2qFIUQo8?p=preview
EDIT: plunker to show how to add directive dynamically like asked http://plnkr.co/edit/U88iPk?p=preview
Upvotes: 0
Views: 66
Reputation: 20162
you want to use directive in other directive, so add it on List directive view like that:
<div ng-repeat="profile in profiles" >
<profile name="{{profile.name}}" age="{{profile.age}}" ></profile>
</div>
Upvotes: 0