如何停止從AngularJS中的自定義指令中單擊？

考慮以下myButton指令：

angular.module("Demo", []).directive("myButton", function() { 
    return { 
    restrict : "E", 
    replace: true, 
    scope: { 
     disabled: "=" 
    }, 
    transclude: true, 
    template: "<div class='my-button' ng-class='{ \"my-button-disabled\": disabled }' ng-transclude></div>", 
    }; 
});

可以使用這樣的：

<my-button disabled="buttonIsDisabled" 
      ng-click="showSomething = !showSomething"> 
    Toggle Something 
</my-button>

我怎麼能阻止ng-click從執行時buttonIsDisabled是true？

PLAYGROUND HERE

來源

2014-04-29 Misha Moroshko

如果你不使用內置的'ng-disabled'，你可能不想使用內置的'ng-click'。 – lyschoening

實際上，'disabled'和'ngDisabled'（後面都是'disabled'）都不會有效果，因爲它們放在'div'（而不是'input'或'button'）。 – gkalpak

爲什麼不使用按鈕的實際按鈕。您可以將您的指令更改爲：

angular.module("Demo", []).directive("myButton", function() { 
    return { 
    restrict : "E", 
    replace: true, 
    scope: { 
     disabled: "=" 
    }, 
    transclude: true, 
    template: "<button class='my-button' ng-class='{ \"my-button-disabled\": disabled }' ng-disabled='disabled' type='button' ng-transclude></button>" 
    }; 
});

然後設計它看起來像您的div。請參閱我製作的Short Example。

來源

2014-04-29 15:18:22 lpiepiora

你可以使用捕獲（addEventListener的第三個可選參數）和（使用stopPropagation）阻止事件的傳播。

「Capture」允許您在事件到達「泡泡」階段之前（當觸發「正常」事件偵聽器時）捕捉事件並且「stopPropagation」將...停止事件傳播（so它從來沒有達到冒泡階段）。

element[0].addEventListener('click', function (evt) { 
    if (scope.disabled) { 
     console.log('Stopped ng-click here'); 
     evt.preventDefault(); 
     evt.stopPropagation(); 
    } 
}, true);

還參見本short demo。

來源

2014-04-29 14:15:59 gkalpak

謝謝！一個問題：'event.preventDefault（）;'這裏真的需要嗎？ –

你讓我:)它沒有它，但似乎工作一樣好，但1）它沒有傷害，2）我覺得它使代碼更具說明性（即它更容易理解阻止它取消事件的目的）。 – gkalpak

捕獲階段在IE上不被支持，所以它不會被跨瀏覽器 – Armen

試試這個在您的鏈接功能：

link: function(scope, element, attrs) { 
     var clickHandlers = $._data(element[0]).events.click; 

     clickHandlers.reverse(); //reverse the click event handlers list 

     element.on('click', function(event) { 
     if (scope.disabled) { 
      event.stopImmediatePropagation(); //use stopImmediatePropagation() instead of stopPropagation() 
     } 
     }); 

     clickHandlers.reverse(); //reverse the list again to make our function at the head of the list 
}

DEMO

該解決方案使用jQuery來處理跨瀏覽器的問題。這裏的想法是將我們的事件處理程序附加在點擊處理程序列表的頭部處並使用stopImmediatePropagation（）來停止同一事件和冒泡事件的當前處理程序。

也看看這個：jquery: stopPropagation vs stopImmediatePropagation

來源

2014-04-29 14:40:02

<my-button disabled="buttonIsDisabled" 
     ng-click="showSomething = buttonIsDisabled ? showSomething : !showSomething">

或

<my-button disabled="buttonIsDisabled" 
     ng-click="showSomething = buttonIsDisabled ? function(){} : !showSomething">

這是太簡單了？

來源

2014-04-29 14:59:42

據我所知，問題是關於在指令中停止ng-click，這樣我們就不需要關心在任何地方添加這個邏輯正在使用這個指令。 –

如何停止從AngularJS中的自定義指令中單擊？

回答

相關問題