指令父單擊中的角度指令

Question

我正在創建一個指令以顯示文本差異。 對於該指令，我需要幾個在指令中分開的按鈕。 一個簡單的例子是：

.directive('differenceViewer', function($templateCache, $compile) {
      return {
        restrict: 'E',
        scope: {
            oldtext: '@',
            newtext: '@',
            template: '@',
            heading: '@',
            options: '=',
            itemdata: '&',
            method: '&'
        },
        replace: false,
        link: (scope, element, attr) => {
            element.append(angular.element($compile($templateCache.get(scope.template))(scope)));
        }
    };
}).directive('diffbutton', function() {
  return {
        restrict: 'E',
        scope: {
            method: '&'
        },
        template: '<button class="btn btn-sm btn-success" ng-click="method()">Rollback</button>',
        replace: true,
        terminal: true,
        link: (scope, element, attr) => {
            scope.directiveClick = function(){
                console.log("directive method"); // is never called
            }

        }
    }
})

我通過模板腳本編譯html：

<script type="text/ng-template" id="differenceViewer.html">
    <div class="ibox-footer">
      <div class="row">
        <div class="col-md-12">
            <diffbutton method="clickedBtn()">Foo</diffbutton>
        </div>
      </div>
    </div>
</script>

diffbutton在由differenceViewer編譯的html內創建的位置。

我需要在控制器中調用一個方法，該方法負責創建所有差異視圖。

app.controller('MainCtrl', function($scope) {
  $scope.clickedBtn = function() {
    console.log('foo'); // is never called
  }
})

這是一個演示該問題的工具。

為了能夠將按鈕的點擊轉發到控制器方法的指令中，我需要更改什么？

我一直在研究這個問題的答案，但仍然無法解決。

請注意，如果我添加

scope.clickedBtn = function() {console.log("bar");}

到differenceViewer指令，它會被調用-但是我需要改為在控制器中調用該方法。

Answer 1

將方法從父元素傳遞到子元素，然后在單擊時觸發它。 例如（偽代碼進來）

<parent-directive>
   <child-directive totrigger="parentClickCallback()"></child-directive>
</parent-directive>

然后在您的父指令中進行設置

$scope.parentClickCallback = function(){//do whatever you neeed}

並在您的孩子的范圍綁定中設置

scope:{
   totrigger:'&'
}

然后在該子按鈕上您只需添加

<button ng-click="totrigger()">ClickMe</button>

每次您單擊該按鈕時，都會觸發附加到totrigger的引用來觸發parentClickCallback。

我不確定為什么為什么要使您的代碼如此復雜。 如果您對范圍綁定不滿意，只需在指令中要求使用控制器並傳遞控制器綁定功能即可。