5

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

1 回答 1

3

任何时候想要操作 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 功能。

于 2013-04-20T07:53:08.010 回答