javascript - 为什么我不能在 AngularJS 中使用 ng-show inside 指令？

Question

我正在尝试制作一个在单击它时显示其内容的元素: 有很多方法可以做到这一点。我想在指令内执行此操作。 为什么不起作用？

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

HTML:

<ez-option title="option 1">
        Option 1 inside
        <input ng-model="x">{{x}}
    </ez-option>
    <ez-option title="option 2">
        Option 2 inside
   </ez-option>

JavaScript:

directive('ezOption',function(){
    return {
        template:'<li></li><div ng-show=selected ng-transclude class=body></div>',
        link:function ($scope,iElement,iAttrs,controller,tanscludeFn){
            iElement.find('li').html(iAttrs.title)
            iElement.find('li').on('click',function(){
              $scope.selected=true
            })
        },
        scope:true,
        transclude:true
    }
})

Answer 1

这是因为 Angular 不知道您的点击事件的范围变化。为了让它意识到，你应该这样做

            iElement.find('li').on('click',function(){
              $scope.$apply(function() {
                $scope.selected=true;
              })
            })

或者，您可以使用 Angular 的 ng-click 代替

m.directive('ezOption',function(){
    return {
        template:'<li ng-click="selected=true"></li><div ng-show=selected ng-transclude class=body></div>',
        link:function ($scope,iElement,iAttrs,controller,tanscludeFn){
            iElement.find('li').html(iAttrs.title);
        },
        controller:function($scope){
          $scope.selected=false
        },
        transclude:true
    }
})