How to create multiple instance of `directive` with different data in it

Question

I have the data in the $scope, according to the scope classNames count, i require to create elements in the page with different data from the scope. how to it?

I am trying to add more no.of directive element, But i see only one output. and i am not able to pass the $scope data to it.

What is the correct way to do this?

Here is my try:

<div class="wrapper" ng-app="myApp">
    <div class="helloWorld" ng-controller="hello">
        <ul>
            <li ng-repeat="item in items">
                {{item.name}}
            </li>
        </ul>
        <hello-world/> //added multiple times
        <hello-world/>
        <hello-world/>
        <hello-world/>
        <hello-world/>
    </div>

</div>

var app = angular.module('myApp', []);

app.controller('hello', function ($scope) {
    $scope.items = [
        {name:'name1', className:'green'},
        {name:'name2', className:'blue'},
        {name:'name3', className:'brown'},
        {name:'name4', className:'yellow'},
        {name:'name5', className:'red'}
    ];
});

app.directive('helloWorld', function () {
        return {
            restrict: 'AE',
            replace: 'true',
            template: '<h3 class="{item.className}">Hello World!! from color of {{item.className}}</h3>',
            scope: {
              className: '@'
            },
            link : function ($scope, elem, attr) {
            }
        }
});

jsfiddle

any one can help me to understand the concept and create the multiple instance of directive here?

Thanks in advance.

nalinc · Accepted Answer · 2015-06-10 06:11:27Z

4

..I am trying to add more no.of directive element, But i see only one output.

First of all, you need to close the directive tag properly. Use So <hello-world><hello-world/> instead of <hello-world/>. Also, place the directive in ng-repeat to get multiple elements.

        <li ng-repeat="item in items">
            {{item.name}}
            <hello-world class-name="{{item.className}}"></hello-world>
        </li>

and i am not able to pass the $scope data to it.

This is because you have created an 'isolated scope' for your directive!

  scope: {
         className: '@'
         }

The @ sign signifies that the className in the isolated scope will get its value from the attribute class-name in the directive

app.directive('helloWorld', function () {
    return {
        restrict: 'E',
        replace: 'true',
        template: '<h3>Hello World!! from color of "{{className}}"</h3>',
        scope: {
            className: '@'
        },
        link: function ($scope, elem, attr) {}
    }
})

Here's the dmeo

answered Jun 10, 2015 at 6:11

nalinc

7,43327 silver badges34 bronze badges

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

4 Comments

3gwebtrain Over a year ago

Generally how to fetch data from url in the angular. in case each of the controller may require different url and data if so how the fetch process added on each of controller. or need we make a service to provide the data according to the controllers parameters - can you show a way to do this? - I am very new sorry for the additional question

nalinc Over a year ago

Not clear on the requirement. Need some code to understand better. How about posting a separate question for this ? ;)

3gwebtrain Over a year ago

sure, will do for you

3gwebtrain Over a year ago

Here is the question to you: stackoverflow.com/questions/30749018/…

dfsq · Accepted Answer · 2015-06-10 05:52:41Z

1

The problem is that you didn't close directives properly. Tag directive cannot be self-closable by definition. So what happens when you write <hello-world /> is that the tag remains unclosed and subsequent directives are failed to be parsed.

It should be:

<hello-world></hello-world>
<hello-world></hello-world>
<hello-world></hello-world>
<hello-world></hello-world>
<hello-world></hello-world>

Demo: http://jsfiddle.net/ydkezd15/2/

edited Jun 10, 2015 at 5:52

answered Jun 10, 2015 at 5:50

dfsq

193k26 gold badges244 silver badges261 bronze badges

7 Comments

3gwebtrain Over a year ago

Ok, How to map the color names accordingly

dfsq Over a year ago

Do you want to iterate hello-world multiple times in loop and bind color to each of them?

3gwebtrain Over a year ago

Yes, exactly. as well i would like to add different values of each. each need to added a click event.

3gwebtrain Over a year ago

Is this the correct way to do it?. I got the result.

3gwebtrain Over a year ago

How to add click event on each and console to it's class name? ex: $(this).on('click', function(){console.log(this.className)})'

|

Collectives™ on Stack Overflow

How to create multiple instance of `directive` with different data in it

2 Answers 2

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related