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

问题描述：

我试图制作一个元素，在点击它时显示它的内容：有很多方法可以做到这一点。我想在指令里面做。为什么它不起作用？为什么我不能在AngularJS中使用ng-show内部指令？

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 
    } 
})

答

由于您的活动角之外......这是一个DOM事件，您需要告诉角度有关范围的变化，以便它可以运行摘要。

使用$scope.$apply()。如果您使用像ng-click这样的核心事件指令，则这是通过角度内部完成的。

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

因此，你通常最好使用核心角事件指令的众多诉诸自己

DEMO

三江源之前。 $ on可以提供帮助吗？ – Aminadav

不....你需要告诉角度运行一个摘要，这不是什么美元是 – charlietfl

答

这是因为角度不知道从您的单击事件的范围变化。为了让它知道，你应该这样做

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

另外，也可以使用角度的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 
    } 
})

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

相关推荐