指示性父指令中的角度指令

我正在創建指令以顯示文本中的差異。對於這個指令，我需要幾個按鈕，我已經在指令中分割出來了。一個simpliefied例子是：指示性父指令中的角度指令

.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>

凡由differenceViewer編譯HTML中創建的diffbutton。

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

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

Here's a plunker顯示該問題。

爲了能夠將指令中的按鈕點擊到控制器方法的指令中，我需要更改哪些內容？

我一直在this question的答案，但仍不能使其工作。

需要注意的是，如果我添加

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

到differenceViewer指令，它被稱爲 - 但我需要調用在控制器的方法來代替。

來源

2017-08-04 Michael

問題是你沒有將'method'傳遞給'differenceViewer'，但是你在'differenceViewer'裏面使用了'clickedBtn'，但是在範圍中沒有定義 – BotanMan

No @BananMan如果我在differenceViewer中定義clickedBtn，無法將事件傳遞給控制器 – Michael

這裏是正確的方法 http://plnkr.co/edit/yiJ1S25FH2EPCtoO9nKo?p=preview – BotanMan

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

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

每次單擊該按鈕時，都會觸發parentClickCallback，並通過引用附加到totrigger。

爲什麼你需要把你的代碼複雜化太多我不確定。如果您對範圍綁定不滿意，只需在您的指令中使用控制器並傳遞控制器綁定函數。

來源

2017-08-04 12:46:33 Vic

您也可以添加像''toTrigger（{$ param1：foo} ）''然後''parentClickCallback（$ param1）'' –

指示性父指令中的角度指令

回答

相關問題