如何在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 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
Javascript实现单例模式
Jan 24 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
Vue如何实现验证码输入交互
Dec 07 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
全国中波电台频率表
2020/03/11 无线电
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python生成随机mac地址的方法
2015/03/16 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
建筑设计所实习生自我鉴定
2013/09/25 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
php实现自动生成验证码的实例讲解
2021/11/17 PHP
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android