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

Decently experienced with jQuery, new to AngularJS.

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

I have a page with a list of colors (variable number) with attached jQuery colorpickers (marked by class ".colorpicker"). On the static, PHP-generated version of the page, that works great; but converting it over to ng-repeat, jQuery doesn't catch future occurances.

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

Is there an event that can be caught with $.on(), or is there some other sneaky best-practices way to accomplish this with AngularJS? I've searched around, but every answer I've found has been how to set up $.on('click') or similar.

是否有可以使用$ .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>

1 个解决方案

#1

Anytime you want to manipulate the DOM or use a jQuery feature/plugin; it's time for a directive. You could add a directive to your ng-repeat that binds the jQuery colorpicker to the input field as it's being added to the DOM. Something like:

任何时候你想操纵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>

And then add the directive:

然后添加指令:

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

Note, this is untested but should solve your problem. If you set up a Plunker or JSFiddle, I'll take a look.

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

Also, be sure to check out the jQuery passthrough feature of Angular UI.

另外,请务必查看Angular UI的jQuery passthrough功能。

#1

<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>