Passing variable to directive template without creating new scope

Question

Is there a way to pass variables using attributes to a directive without creating a new scope ?

HTML

<div ng-click='back()' button='go back'></div>

JS

.directive('button', function () {
    return {
        scope: {
            button: '@'
        },
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true
    }
})

The problem is that the ng-click='back()' now refers to the directive scope. I still can do ng-click='$parent.back()' but it's not what I want.

you should be using &attr to call parent functions passed as attribute stackoverflow.com/questions/15991137/… — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented May 15, 2013 at 9:40
I would like have a generic way. Not scope: {back: '&'} if it's what you mean ? To be able to do: <div ng-click='start_game()' button='Start'></div> for another example. — Seb Fanals
– Seb Fanals, Commented May 15, 2013 at 10:08

Community · Accepted Answer · 2017-05-23 11:54:34Z

34

By default, directives do not create a new scope. If you want to make that explicit, add scope: false to your directive:

<div ng-click='back()' button='go back!'></div>

angular.module('myApp').directive("button", function () {
    return {
        scope: false,  // this is the default, so you could remove this line
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true,
        link: function (scope, element, attrs) {
           scope.button = attrs.button;
        }
    };
});

fiddle

Since a new property, button, is being created on the scope, you should normally create a new child scope using scope: true as @ardentum-c has in his answer. The new scope will prototypially inherit from the parent scope, which is why you don't need to put $parent.back() into your HTML.

One other tidbit to mention: even though we are using replace: true, clicking the element still calls back(). That works because "the replacement process migrates all of the attributes / classes from the old element to the new one." -- directive doc
So ng-click='back()' button='go back!' are migrated to the first div in the directive's template.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 15, 2013 at 15:29

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

2 Comments

Seb Fanals Over a year ago

You're right but I need the isolated scope to have multiple buttons with different names. Bad formulated question I guess. jsfiddle.net/gHjU4/2

Seb Fanals Over a year ago

OK now I'm feeling dumb, as you said, scope:true and no compile needed. I changed the accepted answer.

ardentum-c · Accepted Answer · 2013-05-15 10:29:08Z

3

I guess you should use compile function in this case.

angular.module('myApp').directive("button", function () {
    return {
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true,
        scope:   true,
        compile: function (tElement, tAttrs) {
            // this is link function
            return function (scope) {
                scope.button = tAttrs.button;
            };            
        }
    };
});

Here is jsfiddle example.

answered May 15, 2013 at 10:29

ardentum-c

1,41013 silver badges11 bronze badges

2 Comments

Seb Fanals Over a year ago

I never used compile before but I saw it in the docs, should of read it. Thanks !

Mark Rajcok Over a year ago

scope: true creates a new scope. While I think this is the correct way to do it, the OP asked for no new scope. Also, a compile function is not necessary, only a link function. See my answer for more info.

Collectives™ on Stack Overflow

Passing variable to directive template without creating new scope

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related