如何在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 相关文章推荐
js 判断脚本加载完毕的代码
Jul 13 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
深入浅析react native es6语法
Dec 09 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
详解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小技巧之过滤ascii控制字符
2014/05/14 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python变量和数据类型详解
2017/02/15 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
文秘个人求职信范文
2014/04/22 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
个人年终总结开头
2015/03/06 职场文书
宇宙与人观后感
2015/06/05 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书