对jQuery很有经验,是AngularJS的新手.
我有一个页面,其中包含颜色列表(可变数字)和附加的jQuery采样器(由类“.colorpicker”标记).在静态的,PHP生成的页面版本,这很好用;但是将它转换为ng-repeat,jQuery并没有捕捉到未来的发生.
是否有可以使用$.on()捕获的事件,还是有一些其他偷偷摸摸的最佳实践方法来实现AngularJS？我一直在搜索,但我发现的每个答案都是如何设置$.on(‘click’)或类似的.
<ul class="unstyled">
<li ng-repeat="color in showcolors">
<input type="color" class="input-mini colorpicker" ng-model="color.hex"> {{color.category}}
</li>
</ul>
解决方法
任何时候你想操纵DOM或使用jQuery功能/插件;现在是指令的时候了.你可以在你的ng-repeat中添加一个指令,它将jQuery颜色选择器绑定到输入字段,因为它被添加到DOM中.就像是：
<ul class="unstyled">
<li ng-repeat="color in showcolors">
<input data-jq-colorpicker type="color" class="input-mini colorpicker" ng-model="color.hex"> {{color.category}}
</li>
</ul>
然后添加指令：
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,我会看看.
