使用 jQuery 在 AngularJS 元素指令上绑定事件 [英] Bind events on AngularJS element directives using jQuery

问题描述

我在 AngularJS 中有一个指令:

module = angular.module("demoApp", [], null);module.directive('sample', function () {返回 {限制:E"，转置:真实，替换:真的，模板:<div ng-transclude></div>"，控制器:函数($scope，$element){this.act = 函数(某物){//问题行在这里$element.trigger("myEvent.sample", [something]);};}};}).directive('item', function () {返回 {限制:E"，要求:^样本"，转置:真实，替换:真的，模板:<a ng-transclude style='display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;'></a>",链接:函数(范围、元素、属性、父控制器){element.on("点击", function () {parentController.act(this.innerText);});}}});

在我的 HTML 中，我这样使用它:

<item>1</item><item>2</item></样品>

将呈现为:

<a ng-transclude="" style="display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;;显示:内嵌块；边框:1px 深红色；边距:2px；填充:5px；颜色:深红色；文本装饰:无；背景:#f5d0d0；光标:指针；"class="ng-scope"><span class="ng-scope">1</span></a><a ng-transclude="" style="display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;;显示:内嵌块；边框:1px 深红色；边距:2px；填充:5px；颜色:深红色；文本装饰:无；背景:#f5d0d0；光标:指针；"class="ng-scope"><span class="ng-scope">2</span></a>

我希望能够监听通过 jQuery 手动触发的事件:

$("#myElement").on("myEvent.sample", function (e, something) {警报(点击:"+东西)；});

我希望在点击链接时触发此事件.

如果我在 sample 指令上将 replace 属性设置为 false，它就可以工作.我猜是因为在触发事件时，元素 sample 不再存在，因此它将被内部模板替换.

那么，我该如何实现?

按照下面的答案中的建议，这样做不会达到我的目的:

$($element).trigger("myEvent.sample", [something]);

解决方案

请在小提琴下面找到

小提琴

Trigger 是一个 jquery 函数，它将在适当的处理程序上工作.

$(element).trigger("myEvent.sample");

希望能帮到你

I have a directive in AngularJS:

module = angular.module("demoApp", [], null);
module.directive('sample', function () {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        template: "<div ng-transclude></div>",
        controller: function ($scope, $element) {
            this.act = function (something) {
                //problematic line HERE
                $element.trigger("myEvent.sample", [something]);
            };
        }
    };
})
.directive('item', function () {
    return {
        restrict: "E",
        require: "^sample",
        transclude: true,
        replace: true,
        template: "<a ng-transclude style='display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;'></a>",
        link: function (scope, element, attributes, parentController) {
            element.on("click", function () {
                parentController.act(this.innerText);
            });
        }
    }
});

And in my HTML I use it thus:

<sample id="myElement">
    <item>1</item>
    <item>2</item>
</sample>

Which will be rendered as:

<div ng-transclude="" id="myElement">
    <a ng-transclude="" style="display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;;display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;" class="ng-scope"><span class="ng-scope">1</span></a>
    <a ng-transclude="" style="display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;;display: inline-block; border: 1px solid crimson; margin: 2px; padding: 5px; color: crimson; text-decoration: none; background: #f5d0d0; cursor: pointer;" class="ng-scope"><span class="ng-scope">2</span></a>
</div>

I want to be able to listen to events triggered manually through jQuery:

$("#myElement").on("myEvent.sample", function (e, something) {
    alert("click: " + something);
});

I want this event to be triggered whenever the link is clicked.

If I set the replace property to false on the sample directive, it works. I guess it is because at the point where the event is fired, the element sample no longer exists, and as such it will have been replaced by the inner template.

So, how do I accomplish this?

Doing this, as suggested in the answer below, will not accomplish my purpose:

$($element).trigger("myEvent.sample", [something]);

解决方案

Please find below the fiddle

fiddle

Trigger is a jquery function which will work on proper handler.

$(element).trigger("myEvent.sample");

Hope this helps

这篇关于使用 jQuery 在 AngularJS 元素指令上绑定事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！