改造「警報（）」上刪除按鈕

Question

我有一個包含幾個刪除按鈕有點像這樣的角度應用：

<button class="btn btn-default" ng-click="delete($index)">x</button> 

現在，我們正在接近生產的部署，我想刪除按鈕表現得很好，並「在實際刪除對象之前警告（）「用戶。

如何通過指令在所有刪除按鈕中改寫此功能。我想有一個叫「問」的指令：

<button ask class="btn btn-default btn-xs" ng-click="delete($index)">x</button> 

我可以用它來影響任何按鈕的行爲。

不知怎的，我不能想通過這個

app.directive("ask", function() { 
    return function(scope, elems, attrs) { 
    // what to do here: 
    // 1. shall I change the elems.attr("ng-click") 
    // 2. or scope.attrs("ngClick") 
    ???? 
    } 
}); 

請指引我最好的做法以及一些代碼示例。還要注意，所有刪除按鈕的ng-click回調是不同的，應用程序已經廣泛使用了隔離範圍和子範圍指令。

Answer 1

試試這個實施

angular 
 
    .module('test', []) 
 
    .directive('ask', function() { 
 
    return { 
 
     restrict: 'A', 
 
     scope: {ask: '@', onAsk: '&'}, 
 
     link: function(scope, elem, attrs) { 
 
     elem.on('click', function(e) { 
 
      if(confirm(attrs.ask)) { 
 
      scope.onAsk(); 
 
      scope.$apply(); 
 
      } 
 
     }); 
 
     } 
 
    }; 
 
    }) 
 
    .controller('ItemsCtrl', function($scope) { 
 
    $scope.items = [1,2,3,4,5]; 
 
    $scope["delete"] = function(index) { 
 
     $scope.items.splice(index, 1); 
 
    }; 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="ItemsCtrl"> 
 
    <ul><li ng-repeat="item in items track by $index">{{item}} 
 
    <button ask="Are you sure you want to delete item?" on-ask="delete($index)">x</button> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

您可以構建一個directive這和templatedirective有button元素和ng-click事件。

通過index和delete作爲該指令的輸入。

app.directive("deleteFruit", function(){ 
    return{ 
    // You can also pass one more binding if you want to have a specific alert message 
    scope:{ 
     index: '@', delete:'&' 
    }, 
    template:'<button class="btn btn-default" ng-click="deleteFruit()">x</button>', 
    link: function(scope){ 
     scope.deleteFruit = function(){ 
     // When user clicks, first call the alert function then use the promise returned by dialog and check whether user wants to delete or not 
     //modal.dialog().then(function(userSelectedOption){ 
      // If user wants to delete then go a head and call delete function on main controller 
     // if(userSelectedOption){ 
     // scope.delete(scope.index); 
     // } 
     //}) 
     scope.delete(scope.index); 
     } 
    } 
    } 
}) 

MainCtrl HTML

<delete-fruit delete="delete(index)" index={{$index}}></delete-fruit> 

Plunker。