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

问题描述

我在AngularJS一个指令：

 模块= angular.module（demoApp，[]，NULL）;
module.directive（'样品'，函数（）{
    返回{
        限制：E，
        transclude：真实，
        更换：真实，
        模板：＆LT; D​​IV NG-transclude＆GT;＆LT; / DIV＆gt;中，
        控制器：函数（$范围，$元素）{
            this.act =功能（东西）{
                //问题的行HERE
                $ element.trigger（myEvent.sample，[事]）;
            };
        }
    };
}）
.directive（'项目'，函数（）{
    返回{
        限制：E，
        要求：^样
        transclude：真实，
        更换：真实，
        模板：＆LT;一个NG-transclude风格=显示：inline-block的;边界：1px的固体深红色;保证金：2px的;填充：5像素;颜色：深红色;文字修饰：无;背景：＃f5d0d0;光标：指针;'＆GT;＆下; / A＆gt;中，
        链接：功能（范围，元素，属性，parentController）{
            element.on（点击，函数（）{
                parentController.act（this.innerText）;
            }）;
        }
    }
}）;
 

在我的HTML我这样使用它：

 ＆lt;样品ID =myElement＆GT;
    ＆LT;项目＆GT; 1 LT; /项目＆GT;
    ＆LT;项目＆GT; 2'; /项目＆GT;
＆LT; /样品＆GT;
 

这将呈现为：

 ＆LT; D​​IV NG-transclude =ID =myElement＆GT;
    ＆LT;一个NG-transclude =的风格=显示：inline-block的;边界：1px的固体深红色;保证金：2px的;填充：5像素;颜色：深红色;文字修饰：无;背景：＃f5d0d0;光标：指针;;显示：inline-block的;边界：1px的固体深红色;保证金：2px的;填充：5像素;颜色：深红色;文字修饰：无;背景：＃f5d0d0;光标：指针;类=NG-范围＆GT;＆LT;跨度类=NG-范围＆GT; 1 LT; / SPAN＆GT;＆LT; / A＆GT;
    ＆LT;一个NG-transclude =的风格=显示：inline-block的;边界：1px的固体深红色;保证金：2px的;填充：5像素;颜色：深红色;文字修饰：无;背景：＃f5d0d0;光标：指针;;显示：inline-block的;边界：1px的固体深红色;保证金：2px的;填充：5像素;颜色：深红色;文字修饰：无;背景：＃f5d0d0;光标：指针;类=NG-范围＆GT;＆LT;跨度类=NG-范围＆GT; 2'; / SPAN＆GT;＆LT; / A＆GT;
＆LT; / DIV＆GT;
 

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

  $（＃myElement）。在（myEvent.sample功能（即东西）{
    警报（点击+东西）;
}）;
 

我希望每次单击的链接触发该事件。

如果我设置了替换属性假在样品指令，它的工作原理。我想这是因为在该事件被触发，该点的元素样品已不存在，因此它会被由内模板替换。

所以，我怎么做到这一点？

这样做，如下面的回答表明，不会达到我的目的：

  $（$元素）.trigger（myEvent.sample，[事]）;
 

解决方案

请找到下面捣鼓

小提琴

触发器是一个jQuery的功能，这将在适当的处理工作。

  $（元素）.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屋！