Question

例如：

<div ng-repeat="thing in things">
    ...
    <script>$('.tooltip').tooltip();</script>
</div>

当然，我只能在页面加载后调用$('.tooltip').tooltip();，因为当angularjs呈现新页面时，在再次调用插件之前，工具提示将无效。所以，我的问题是，我的做法可怕吗？有什么我可以做的不同吗？

Answer 1

您需要创建指令并在编译或链接步骤后添加此调用。

同时检查ui.bootstrap.tooltip implementation及其usage

的示例

如果您决定实施自己的指令，最简单的情况将是：

app.directive('tooltip', function (){
  return function(scope, elem) {
    elem.tooltip();
  }
});

如果您拥有插件源代码，请考虑从

更改它

$(selector).tooltip()

要 $（父）.tooltip（选择器）

在插件中使用事件委托（即代替

$(selector).on('mouseenter', handler)

你的插件会

$(parent).on('mouseenter', selector, handler)

这样您就可以分配一次并创建可应用于顶级节点的指令

<section enable-tooltip='.tooltip'>
   <p class='tooltip' ng-repeat='i in arr' tooltip='{{i.tooltip}}'></p>
</section>

因此，您的指令会在顶级节点上设置事件＆＃39;部分＆＃39;无论你对$ scope.arr做出什么改变，你都不需要打开/关闭你的处理程序。

app.directive('enableTooltip', function (){
  return {
    scope: {
     selector:'@enableTooltip'
    },
    link: function(scope, elem) {
       elem.tooltip(scope.selector);
    }
  }
});

Answer 2

通常，您应该始终创建指令而不是直接调用jQuery插件。

最好创建一个本机指令，但是你可以很容易地将大多数jQuery插件包装到一个指令中。

/* the pattern */
angular.module('myModule').directive('myWrappedPlugin', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            /* call your jquery plugin on the element */
            element.plugin();
        }
    };
});

在html中使用新指令：

<!-- add the directive to your div -->
<!-- notice the name is converted to spinal-case -->
<div my-wrapped-plugin></div>

这个基本模式适用于大多数jQuery插件。我将向您推荐指令文档以获取更多详细信息：Developer Guide / Directives

是否可以在每个ng-repeat中调用插件？

2 个答案: