如何在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和reverse使用介绍
Nov 21 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 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调用Linux命令权限不足问题解决方法
2015/02/07 PHP
php计算title标题相似比的方法
2015/07/29 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
Python open读写文件实现脚本
2008/09/06 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
研发工程师岗位职责
2014/04/28 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
司法建议书范文
2014/05/13 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
大学生毕业评语
2014/12/31 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
MongoDB 常用的crud操作语句
2021/06/20 MongoDB