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