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

Question

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

Answer 1

任何时候你想要操作 DOM 或使用 jQuery 功能/插件；是时候发出指令了。您可以向 ng-repeat 添加一条指令，在将 jQuery colorpicker 添加到 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，我会看一下。

另外，请务必查看Angular UI 的 jQuery 直通功能。