帶有jQuery事件的Angular指令僅觸發一次

Question

我有一個指令，僅當您使用該指令在頁面上啟動時才觸發一次。

我究竟做錯了什么？

HTML-

<div class="body">
    <a href="#/systems"><div class="viewBySys"></div></a>
        <div ng-view class="container reveal-animation"></div>
    <a href="#/applications"><div class="viewByAppl"></div></a>
</div>

<script type="text/ng-template" id="appls.html">
        <div sample class="appls myElement" ng-repeat="app in appData">
            <a href=#/applications/{{app.uri}}>
                <div>
                    <img ng-src="{{app.imageS}}"/>
                    {{app.name}}
                </div>
            </a>
        </div>
</script>

JS-

app.directive('sample', function () {
return {
    restrict: 'A',
    transclude: false,
    link: function (scope, element, attributes) {
        element.on('click', function () {
            $(element).trigger("myEvent.sample");
        });
    },
};
});

$(document).ready(function () {

$('img').on('dragstart', function (event) { event.preventDefault(); });

$(".myElement").on("myEvent.sample", function (e) {
    alert('clicked!');
    console.log("made it");
});

});

我想以為我正確使用了指令，但是我對Angular還是很陌生，並且我確定我在Jquery中使用了不正確的指令。

Answer 1

嘗試將以下內容添加到document.ready(..)函數中。

console.log('sample count: '+$(".myElement").length);

我想您會發現它會在控制台上打印出sample count: 1 。

在您的模板中

<div sample class="appls myElement" ng-repeat="app in appData">

ng-repeat指令創建其他DOM元素，但這在Angular摘要周期中發生。 執行完文檔准備工作后發生的情況。

如果要廣播來自AngularJS的自定義jQuery事件。 選擇一個您知道存在的DOM元素。

在您的指令更改為此

  $('body').trigger('myEvent.sample', $(element));

現在，您可以在JavaScript中的其他位置捕獲事件。

  $('body').on('myEvent.sample',function(event, element){
      console.log("made it");
      console.log(element); // the argument for the event.
  });