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!

Answer 1

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

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