Question

如何在AngularJS中使用插件

Answer 1

很简单，给插件写一个directive。
在这里，我会使用一个简单的jquery插件Toolbar.js 的DEMO。
这是我们如何在jquery中创建一个tooltip的：
[html] view plain copy
在CODE上查看代码片派生到我的代码片
<!-- Click this to see a toolbar -->
<div id="format-toolbar" class="settings-button">
<img src="xxx">
</div>

<!-- Our tooltip style toolbar -->
<div id="format-toolbar-options">
<a href="#"><i class="icon-align-left"></i></a>
<a href="#"><i class="icon-align-center"></i></a>
<a href="#"><i class="icon-align-right"></i></a>
</div>
[javascript] view plain copy
在CODE上查看代码片派生到我的代码片
<!-- Typical jQuery plugin invocation -->
$('#format-toolbar').toolbar({
content: '#format-toolbar-options',
position: 'left'
});

Answer 2

1、插件源码主要基于angular directive来实现。 2、调用时关键地方是后台请求处理函数，也就是从后台取数据。 3、插件有两个关键参数currentPage、itemsPerPage，当前页码和每页的记录数。 4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。 在调用的页码中我使用了$watch来监控。 我初次使用时是把调用函数放在了插件的onchange中，结果发现每次都会触发两次后台。这个地方需要注意。 5、我把请求后台封装成了Service层，然后在Controller里调用，也符合MVC思想。