Directive and scope in AngularJS

Question

Here is the code, ideally i should see

parent: true

when I click the toggle

However, it doesn't work

Here is the plunker

<body ng-controller="MainCtrl">
  <button type="button" ng-click='isParentShown= !isParentShown' >Toggle</button>
  <div><span>Controller-isParentShown: {{isParentShown}}</span></div>
  <parent isShown='isParentShown'></parent>

</body>


var app = angular.module('plunker', []).directive('parent',function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
                isShown: '='
        },
        template: '<span>Parent: {{isShown}}</span>'
    };
}).directive('child',function(){
    return {
        restrict: 'E',
        replace: true,
        template:'<span>Child: {{isChildShown}}</span>',
        scope: {
                isChildShown: '@'
        }
    };
});
app.controller('MainCtrl', function($scope) {
  $scope.isParentShown = false;
});

The title of the question should be something about scope configuration in directives, the problem is not specific to nested directives — Guillaume86
– Guillaume86, Commented Oct 26, 2012 at 20:57

Guillaume86 · Accepted Answer · 2012-10-26 20:55:57Z

3

The problem is in the casing of the attributes, if you define a isShown binding, it's expecting a is-shown or is:shown attribute. Here's the fixed plunker: http://plnkr.co/edit/UOigth

answered Oct 26, 2012 at 20:55

Guillaume86

14.4k4 gold badges56 silver badges57 bronze badges

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

2 Comments

maxisam Over a year ago

OMG, I am going to kill myself. What a stupid question ! Thanks for helping

Guillaume86 Over a year ago

No problem, happens to everyone ;)

Collectives™ on Stack Overflow

Directive and scope in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related