javascript - Angular 指令与 jquery 事件仅触发一次

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.
  });