Angular.js，取消NG單擊事件

Question

我有這一塊的HTML

<button ui:confirm ng:click="action"></button> 

的和JavaScript代碼

的

.directive('uiConfirm', function() 
{ 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) 
     { 
      element.bind('click.confirm', function(event) 
      { 
       event.preventDefault(); 
       event.stopPropagation(); 
      }); 
     } 
    } 
}) 

現在，我想要做的，就是取消ng：click事件，從指令中。 但ng：無論我做什麼，點擊仍然會被觸發。

演示：Fiddle

編輯： 順便提及，在此範圍內產生誤差：

element.bind('click.confirm', function(event) 
{ 
    causeAnError(); 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

是否招，和canceles事件傳播，而且還引發和難看的錯誤= ）

編輯2： 最後我找到了解決方案！

.directive('uiConfirm', function() 
{ 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) 
     { 
      element.bind('click', function(event) 
      { 
       scope.$eval(attrs.uiConfirm); // this line of code does the magic! 
      }); 
     } 
    } 
}) 

編輯3：

最終解決

.directive('uiConfirm', function() 
{ 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) 
     { 
      /** 
      * Clicking the trigger start the confirmation process. 
      */ 
      element.bind('click.confirm', function(event) 
      { 
       // not confirmed? 
       if(! element.data().confirmed) 
       { 
        element.data().confirmed = true; 
        element.addClass('btn-danger'); 
       } 
       // is already confirmed.. 
       else 
       { 
        element.trigger('mouseout.confirm'); 
        scope.$eval(attrs.uiConfirm); 
       } 
      }); 

      /** 
      * Leaving the element, resets the whole process. 
      */ 
      element.bind('mouseout.confirm', function() 
      { 
       // reset all values 
       element.data().confirmed = false; 
       element.removeClass('btn-danger'); 
      }); 

      // reset the whole process on the first run 
      element.trigger('mouseout.confirm'); 
     } 
    } 
}) 

點擊一個按鈕，在第一時間，要讓它紅色，並且不會觸發任何動作。單擊第二次，調用該操作。離開按鈕重置整個過程。

Answer 1

正如評論上@討論Flek的回答，來調用屬性定義的函數，

ui:confirm="action()" 

使用scope.$eval()：

element.bind('click', function(event) { 
    scope.$eval(attrs.uiConfirm); // calls action() on the scope 
}); 

Answer 2

你有兩個嵌套的指令：

1. uiConfirm
2. ngClick

你然後綁定了兩個事件處理它（一個由uiConfirm，另一個由ngClick）。 With preventDefault你想停止默認動作，但我猜測按鈕的默認動作是不調用動作（）方法。 stopPropagation只是防止事件從冒泡了DOM樹，但既然你只關心按鈕本身它不會改變任何東西。

我會做的是在指令中創建一個自定義動作方法，然後檢查它是否應該做某件事。

.directive('uiConfirm', function() 
{ 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) 
     { 
      scope.action = function(){ 
       // Check whether there is something to do or not. 
      }; 
     } 
    } 
})