AngularJS. Directive' isolated scope, pushing a value from parent scope

Question

I try to pass a value from parent scope to my directive. To its isolated scope. It works ok if I pass values as argument to my directive. But id does not work for parent scope.

Here is how I use it:

<div ng-init="event='hello'">  <!-- this is parent scope -->

    <input31></input31>

</div>

Here is the directive itself.

directives.directive("input31", [function() {    
    return {
        restrict: 'E',
        template:"<div> <input type='text' ng-model='data' /> {{data}} </div>",
        replace: true,
        scope : { //defining isolated scope
            event: "=event"  // pushing value to isolated directive scope
        }
    }

}]);

In the end I'm expecting to have event var filled by 'hello' value but I have null

update

I thought that it's possible to select/filter what to use from parent scope, kind of filter. Like if in parent scope I have a,b,c then specifying 'scope {a: '=a'}' I could transfer only 'a' from parent scope. But as I understand this not the way to go. this work only if passing values as directive arguments (?)

KayakDave · Accepted Answer · 2013-12-02 02:53:16Z

4

Using an isolate scope binding you'll need to pass the value in as an attribute on the directive.

<input31 event=event></input31>

This can be a plus from a documentation/maintenance standpoint.

But, if you really don't want to pass it in as an attribute, but otherwise want an isolate scope, then instead of using a binding you can copy the value off the parent's scope inside the directive's link function.

link: function ($scope) {
    $scope.event = $scope.$parent.event;
}

If you do this then you don't need to pass it in via the isolate scope, so the directive's scope can look like this:

scope : { 
        },

edited Dec 2, 2013 at 2:53

answered Dec 2, 2013 at 2:32

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

2 Comments

ses Over a year ago

I thought that it's possible to select/filter what to use from parent scope, kind of filter. Like if in parent scope I have a,b,c then specifying 'scope {a: '=a'}' I could transfer only 'a' from parent scope. But as I understand this not the way to go.

KayakDave Over a year ago

You're right that you can do exactly that. But you have to both specify it in the scope and specify the mapping on the directive. Those two pieces work together. Here's a good couple minute overview:egghead.io/lessons/angularjs-understanding-isolate-scope

GordyD · Accepted Answer · 2013-12-02 02:58:53Z

0

You could use the existing scope from directive's DOM element. You can do do this by either:

Setting scope as false
Not setting scope at all (by default scope is set to false).

Please see this jsFiddle for an example.

Your directive could then be defined like this:

app.directive('input31', function () {
    return {
        restrict: 'E',
        template:"<div> <input type='text' ng-model='event' /> {{event}} </div>",
        replace: true,
        scope : false // or omit this line
    };
});

If you require an isolated scope then you have to specify what values to bind from the parent scope. You can do this in two ways:

Pass specific attributes to your directive's isolated scope e.g. <input31 event="event">
Reference the parent scope directly in your directive. e.g. $scope.$parent.event

edited Dec 2, 2013 at 2:58

answered Dec 2, 2013 at 2:39

GordyD

5,10328 silver badges30 bronze badges

1 Comment

ses Over a year ago

Updated my question. (That what you're pointing I've already knew)

ses · Accepted Answer · 2013-12-03 16:36:53Z

0

I've put an example of what I have been asking.

https://github.com/Sergey80/angularjs-examples/blob/master/public/examples/directive_isolate_scope/sample6_at_sign.html

There is way to use parent scope from within Perent scope.

answered Dec 3, 2013 at 16:36

ses

13.4k32 gold badges134 silver badges243 bronze badges

Collectives™ on Stack Overflow

AngularJS. Directive' isolated scope, pushing a value from parent scope

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related