AngularJS中的指令和范围

时间:2012-10-26 20:24:29

标签: angularjs

这是代码,理想情况下我应该看到

  

parent:true

点击切换按钮

然而,它不起作用

以下是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;
});

1 个答案:

答案 0 :(得分:3)

问题在于属性的大小写,如果你定义一个isShown绑定,它需要一个is-shownis:shown属性。这是固定的plunker:http://plnkr.co/edit/UOigth