Angular Isolate Scope for nested directives

Question

I'm attempting to set up an angular app with three directives - container, getter and setter. I've put it up at http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview

<container>
    <getter name="first"></getter>
    <getter name="second"></getter>
    <setter name="setter"></setter>
</container>

Container has a scope with the variable value which can be read by getter and setter. getter displays the value whilst setter both displays and changes the value.

    angular.module("app").directive('container', function() {
      return {
        scope: {},
        template: '<h1>Container <input ng-model="value"/></h1><div ng-transclude>SCOPED1</div>',
        transclude: true,
        controller: ["$scope", "$window", function($scope, $window){
            $scope.value = "Hello"
        }]
      };
    });

Both getter and setter have their own isolate scope but also have a two-way binding to the container scope to get and set value.

    angular.module("app").directive('getter', function() {
      return {
        require: '^container',
        scope: {
            name: '@',
            value:'='
          },
        template: '<p>I am getter {{name}}, I got {{value}}</p>'
      };
    });

At the moment, getter and setter can access the container scope using $scope.$parent.$parent.value but that seems way too clunky. I thought using scope:{value:'='} would set up two way bindings but apparently not.

What am I doing wrong?

http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview

This may be what you want? plnkr.co/edit/poW8JNbf1wrGNb7K0WBy?p=preview — trees_are_great
– trees_are_great, Commented Apr 7, 2015 at 16:24

Ben Jaspers · Accepted Answer · 2015-04-07 16:28:55Z

1

The directive isolate scope is not automatically linked to variables in the parent scope. You must tell the directive that value is supposed to be value in the parent scope, the same way you supply the directive name.

<container value="value">
    <getter name="first" value="value"></getter>
    <getter name="second" value="value"></getter>
    <setter name="setter" value="value"></setter>
</container>

edited Apr 7, 2015 at 16:28

answered Apr 7, 2015 at 16:18

Ben Jaspers

1,5461 gold badge10 silver badges13 bronze badges

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

3 Comments

TDN169 Over a year ago

Thanks for that - Unfortunately I've corrected the code (plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview) but it doesn't seem to be working.

Ben Jaspers Over a year ago

Are you expecting it to pull the value from the container directive? That isn't hooked up to the parent scope at all.

TDN169 Over a year ago

Oh sorry that was a mistake in my .js file - along with @Sam 's comment it all makes sense!

Collectives™ on Stack Overflow

Angular Isolate Scope for nested directives

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related