angularjs custom directive with custom attributes

Question

I'm new to angularjs and I don't know if this is possible and if possible how to implement it. I want to create a custom directive with a controller that uses information passed to it through attributes. This is a non working example of what I want to implement:

The HTML should look like:

<div ng-app="test">
    <custom-directive attr1="value1" attr2="value2"></custom-directive>
</div>

And the js:

   var app = angular.module('test', [ ]);
    app.directive("customDirective", function(){
        return {
            restrict: 'E',
            scope: ???,
            controller: function(){
                console.log("print attributes value: " + attr1 + ", " +  attr2 );
            }
        }
    };
});

And the expect console output should be:

print attributes value: value1, value2

Any idea? Thanks!

PzYon · Accepted Answer · 2014-10-22 08:18:27Z

7

In your directive you can define the scope objects (attributes) you want to access and use as follows:

app.directive("customDirective", function(){
    return {
        restrict: 'E',
        scope: {attr1: "=", attr2: "="},
        link: function(scope, elem, attr){
            console.log("print attributes value: " + attr.attr1 + ", " +  attr.attr2 );
        }
    };

There are different types of bindings you can use:

= is for two-way binding
@ simply reads the value (one-way binding)
& is used to bind functions

See below link for more information: http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

edited Oct 22, 2014 at 8:18

answered Oct 21, 2014 at 22:15

PzYon

2,9833 gold badges19 silver badges28 bronze badges

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

2 Comments

narcispr Over a year ago

When I try to execute your code I obtain the following error: Error: scope is not defined. I've tried to pass scope as a parameter controller: function(scope, element, attr){..} but doesn't work.

PzYon Over a year ago

You are right, I have just updated my example, now it should work. I forgot to pass the "attr" to the link function and then access the attribute that way. Please note that I am using the link function for output and that it should be "restrict: 'E'" instead of "restrict = 'E'".

narcispr · Accepted Answer · 2014-10-22 10:04:29Z

2

Looking further I found this possible solution to my problem. It is very similar to the one proposed by Plunker with only slight changes in the syntax. This one works for me but I do not understand why the proposed by Plunker not.

app.directive('customDirective', function(){
    return {
        compile: function() {
            return {
                pre: function(scope, element, attributes) {
                    console.log("Value: " + attributes.attr1 + attributes.attr2);
                }
            };
        }
    }
});

answered Oct 22, 2014 at 10:04

narcispr

3411 gold badge3 silver badges8 bronze badges

Comments

Jack · Accepted Answer · 2014-10-21 22:41:31Z

0

Directives can get quite complex. Knowing your end goal would allow a better answer, but this is the simplest way to do what you're asking:

var app = angular.module('test', []);
app.directive("customDirective", function(){
    return {
        link: function(scope, el, attr){
            console.log("print attributes value: " + attr.attr1 + ", " +  attr.attr2 );
        }
    }
});

Plunker

edited Oct 21, 2014 at 22:41

answered Oct 21, 2014 at 22:25

Jack

21.3k12 gold badges51 silver badges48 bronze badges

2 Comments

narcispr Over a year ago

When I execute your code nothing appears in the console neither an error.

Jack Over a year ago

@narcispr What version of angular are you using? Did you try the Plunkr? That works...

Collectives™ on Stack Overflow

angularjs custom directive with custom attributes

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related