Pass variable to AngularJS directive without isolated scope

Question

I am learning AngularJS directive, and one thing I want to do is to pass some variable $scope.message in the parent scope (a scope of a controller), and I want it to be renamed to param inside the directive alert. I can do this with an isolated scope:

<div alert param="message"></div>

and define

.directive("alert", function(){
    return{
        restrict: "A",
        scope: {
            param: "="
        },
        link: function(scope){
            console.log(scope.param) # log the message correctly
        }
    }
})

But can I do this without using isolated scope? Suppose I want to add another directive toast to the <div toast alert></div> and utilize the same param (keeping the 2-way data-binding), naively I will do

.directive("toast", function(){
    return{
        restrict: "A",
        scope: {
            param: "="
        },
        link: function(scope){
            console.log(scope.param)
        }
    }
})

I surely will get an error Multiple directives [alert, toast] asking for new/isolated scope on:<div...

So in all, my question is, how to rename parent scope variable without isolated scope, and how to share variables when two directives are placed on a single DOM?

Do you want 2 directives to bind to the same parent $scope property? — Davin Tryon
– Davin Tryon, Commented Dec 30, 2014 at 17:37

Patrick · Accepted Answer · 2014-12-30 17:43:45Z

16

Modify your toast directive:

.directive("toast", function(){
    return{
        restrict: "A",
        link: function(scope, elem, attrs){
            var param = scope.$eval(attrs.param);
            console.log(param)
        }
    }
})

Example fiddle.

Since toast is now on the same scope as the parent would have been (if it was allowed to be isolate scope), you can simply call $eval on scope with the param attribute to get the value.

edited Dec 30, 2014 at 17:43

answered Dec 30, 2014 at 17:36

Patrick

6,9783 gold badges25 silver badges31 bronze badges

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

3 Comments

Lelouch Over a year ago

Thanks, works perfectly! I should take a look at $eval() docs then.

Lelouch Over a year ago

does the $eval() just return the value or actually provides data-binding? It appears it only return the value, but I want to make sure.

Patrick Over a year ago

It is just the value. If you need to simulate bindings, you could use a $watch... I believe this can be overkill though as you just have to $eval again to get the most recent value (on some ngEvent for instance).

Collectives™ on Stack Overflow

Pass variable to AngularJS directive without isolated scope

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related