如何强制jQuery“监听”并激活未来AngularJS ng-repeat元素的插件?

对jQuery很有经验,是AngularJS的新手。

我有一个页面,其中包含颜色列表(可变数字)和附加的jQuery采样器(由类“.colorpicker”标记)。 在静态的,PHP生成的页面版本上,这很有用; 但是将它转换为ng-repeat,jQuery并没有捕捉到未来的发生。

是否有可以使用$ .on()捕获的事件,还是有一些其他偷偷摸摸的最佳实践方法来实现AngularJS? 我一直在搜索,但我发现的每个答案都是如何设置$ .on(’click’)或类似的。

  • {{color.category}}

任何时候你想操纵DOM或使用jQueryfunction/插件; 现在是指令的时候了。 你可以在你的ng-repeat中添加一个指令,它将jQuery颜色选择器绑定到输入字段,因为它被添加到DOM中。 就像是:

 
  • {{color.category}}

然后添加指令:

 yourApp.directive('jqColorpicker', function(){ var linkFn = function(scope,element,attrs){ // element here = $(this) // bind your plugin or events (click, hover etc.) here element.colorpicker(); element.bind('click', function(e){ // do something }); } return { restrict:'A', link: linkFn } }); 

请注意,这是未经测试但应解决您的问题。 如果你设置了一个Plunker或JSFiddle,我会看看。

另外,请务必查看Angular UI的jQuery passthroughfunction 。