如何强制 jQuery "listen"并激活未来的 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颜色选择器添加到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 passthrough特性。