Javascript 在每次ng重复中调用插件可以吗?
例如:Javascript 在每次ng重复中调用插件可以吗?,javascript,angularjs,Javascript,Angularjs,例如: <div ng-repeat="thing in things"> ... <script>$('.tooltip').tooltip();</script> </div> ... $('.tooltip').tooltip(); 当然我不能调用$('.tooltip').tooltip()页面加载之后,因为当angularjs呈现新页面时,工具提示将不起作用,直到不再调用插件。那么,我的问题是,我的方法可怕吗?有什么
<div ng-repeat="thing in things">
...
<script>$('.tooltip').tooltip();</script>
</div>
...
$('.tooltip').tooltip();
当然我不能调用
$('.tooltip').tooltip()代码>页面加载之后,因为当angularjs呈现新页面时,工具提示将不起作用,直到不再调用插件。那么,我的问题是,我的方法可怕吗?有什么不同的方法吗?您需要创建指令,并在编译或链接步骤后添加此调用
还检查并举例说明了它的功能
如果您决定实施自己的指令,最简单的情况是:
app.directive('tooltip', function (){
return function(scope, elem) {
elem.tooltip();
}
});
如果你有插件源代码,考虑从
改变它
$(selector).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>
通常,您应该始终创建指令,而不是直接调用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插件。我将向您介绍指令文档以了解更多详细信息:将工具提示包装为指令。是的,您的方法绝对不是角度方式。我如何为此插件创建指令?
<!-- add the directive to your div -->
<!-- notice the name is converted to spinal-case -->
<div my-wrapped-plugin></div>