javascript - 我如何强制 jQuery 为 "listen"并激活 future AngularJS ng-repeat 元素的插件？

Question

有丰富的 jQuery 经验，是 AngularJS 的新手。

我有一个包含颜色列表(可变编号)的页面，其中包含附加的 jQuery 颜色选择器(由类“.colorpicker”标记)。在页面的 PHP 生成的静态版本上，效果很好；但是将它转换为 ng-repeat，jQuery 不会捕捉到 future 的事件。

有没有可以用 $.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 颜色选择器添加到 DOM 时将其绑定(bind)到输入字段。像这样的东西:

<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，我会看看。

此外，请务必查看 jQuery passthrough feature of Angular UI .