如何在AngularJs中调用第三方插件库


Posted in Javascript onMay 21, 2017

在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库。我们不能散乱的在AngularJS中引入这些库,例如在controller中。那么应该怎么在Angular中使用第三方库呢?

如何使用?

很简单,给插件写一个directive。

在这里,我会使用一个简单的jquery插件Toolbar.js 的DEMO。

这是我们如何在jquery中创建一个tooltip的:

<!-- Click this to see a toolbar --> 
<div id="format-toolbar" class="settings-button"> 
  <img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png"> 
</div> 
  
<!-- Our tooltip style toolbar --> 
<div id="format-toolbar-options"> 
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="icon-align-left"></i></a> 
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="icon-align-center"></i></a> 
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="icon-align-right"></i></a> 
</div>
<!-- Typical jQuery plugin invocation --> 
$('#format-toolbar').toolbar({ 
  content: '#format-toolbar-options',  
  position: 'left' 
});

在Angular中使用

在这里我们自定义一个元素属性'toolbar-tip'--这使我们要写的Angular directive。我们改写下html:

<div id="format-toolbar1" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'top'}"> 
  <img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png"> 
</div>

这里需要注意的一点是:我们把toolbar的options全部写到了html中,这样,我们就可以在任意地方使用相同的directive。
最终:

<script> 
var App = angular.module('Toolbar', []); 
  
App.directive('toolbarTip', function() { 
  return { 
    // Restrict it to be an attribute in this case 
    restrict: 'A', 
    // responsible for registering DOM listeners as well as updating the DOM 
    link: function(scope, element, attrs) { 
      $(element).toolbar(scope.$eval(attrs.toolbarTip)); 
    } 
  }; 
}); 
</script>

这样就很简单的在Angular中引用了第三方插件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
详解Angular-Cli中引用第三方库
May 21 #Javascript
Angular2安装angular-cli
May 21 #Javascript
Angular2使用Augury来调试Angular2程序
May 21 #Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 #Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 #Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
node.js 中间件express-session使用详解
May 20 #Javascript
You might like
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
详解Python中namedtuple的使用
2020/04/27 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
益模软件Java笔试题
2012/03/27 面试题
医药专业推荐信
2013/11/15 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
行政专员工作职责
2013/12/22 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
毕业典礼致辞
2015/07/29 职场文书
人事任命书范本
2015/09/21 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
Python中异常处理用法
2021/11/27 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js