在具有不同控制器的視圖內使用ng-click和指令函數

Question

我有這個HTML：

<button ng-click="reset()">
<div ng-controller="anotherController" class="container">
  <directive data="{{ datafordirective }}"></directive>
</div>

指示：

app.directive('directive', function(){
   return {
    restrict: 'AE',
    scope:{ data: '=', someAction: '=', reset: '='},
    link: function(scope, element, attrs){
     scope.reset = function(){
        //reset dataset
     };  
  }
};

});

我的指令內部有一個鏈接函數來重置數據，但問題是使用此按鈕和此指令的即時消息具有不同的控制器，但該指令和此視圖控制器都屬於同一app.module（' appname'，[]）...

有沒有辦法做到這一點？ 在指令范圍之外使用scope.reset（）函數？

謝謝！

Answer 1

您可以通過多種方法來執行此操作。 我將舉幾個例子：

1.簡單（非理想）方式

在指令中訪問父作用域：

代替：

scope.reset = function() {};

采用：

scope.$parent.reset = function() {};  

但是從子范圍內修改父范圍不是一個好習慣。 它可能導致范圍繼承的工作方式混亂（ AngularJS中范圍原型/原型繼承的細微差別是什么？ ）。 另外，IMO，這不是很好的封裝。

2.一種（略）更好的方法

<button ng-click="buttonClicked = true">
<div ng-controller="anotherController" class="container">
  <directive data="{{ datafordirective }}" reset="buttonClicked" reset-callback="buttonClicked = false"></directive>
</div>

在這里，我們使用父作用域中的屬性（ buttonClicked ）通過元素上的屬性控制指令。

app.directive('directive', function(){
   return {
    restrict: 'AE',
    scope:{ data: '=', resetCallback: '&', reset: '='},
    link: function(scope, element, attrs){
     scope.$watch('reset', function(val) {
       if (val) {
         // reset dataset
         scope.resetCallback();
       }

     });
  }
};

該指令將buttonClicked的值綁定到reset ，然后buttonClicked該值是否更改，並在設置時重置該數據集。

3.另一個更好的方法

創建一個服務來處理數據集上的操作。

app.service('dataset', function() {
  this.reset = function() {
    // reset dataset
  };
});

然后，在父控制器的某處，您需要注入dataset服務並創建一個函數來調用dataset.reset ：

$scope.reset = function() {
  dataset.reset();
};