ngClick在指令

Question

中使用内部元素时没有注册我有一个带有绝对定位锚点的边栏，点击时应激活一个AngularJS指令来打开/关闭边栏。

当锚点位于aside元素之外时，此功能正常工作，但出于定位原因，我希望它在里面。但是，在元素内部，我没有看到任何证据表明点击是处理过的。

<div class="page-wrap"> 
    <aside data-slide-toggle="smToggleSidebar" data-slide-toggle-duration="100"> 
    <a ng-click="smToggleSidebar=!smToggleSidebar">&lang;</a> 
    // content here 
    </aside> 
</div> 

该指令本质上是：

.directive('slideToggle', function() { 
    return { 
     restrict: 'A', 
     scope:{ 
     isOpen: "=slideToggle" 
     }, 
     link: function(scope, element, attr) { 
     var slideDuration = parseInt(attr.slideToggleDuration, 10) || 200; 
     scope.$watch('isOpen', function(newVal,oldVal){ 
      if(newVal !== oldVal){ 
      $(element).stop().slideToggle(slideDuration); 
      } 
     }); 
     } 
    }; 
    }) 

我的品牌新的角度，所以我敢肯定这件事情，我的误解，有可能与范围。

Answer 1

Angular指令创建它们自己的作用域，所以如果将锚标签放在指令内，它将属于指令的作用域，而不是父对象。为了让指令必须你必须将它添加到的范围，以传递函数指令父功能的访问：

scope:{ 
    isOpen: "=slideToggle", 
    onToggle: '&' 
    } 

，并管理您的指令内的NG-点击。我建议是这样的：

HTML

<div class="page-wrap"> 
    <aside on-toggle="onToggle()" data-slide-toggle="smToggleSidebar" data-slide-toggle-duration="100"> 
     <a ng-click="onToggle()">&lang;</a> 
     // content here 
    </aside> 
</div> 

指令

.directive('slideToggle', function() { 
return { 
    restrict: 'A', 
    scope:{ 
    isOpen: "=slideToggle", 
    onToggle: "&" 
    }, 
    link: function(scope, element, attr) { 
    var slideDuration = parseInt(attr.slideToggleDuration, 10) || 200; 
    scope.$watch('isOpen', function(newVal,oldVal){ 
     if(newVal !== oldVal){ 
     $(element).stop().slideToggle(slideDuration); 
     } 
    }); 
    } 
}; 

}）;

父控制器

$scope.onToggle = function(){ 
    $scope.smToggleSidebar =! $scope.smToggleSidebar; 
};