如何在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和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
简单实现js浮动框
Dec 13 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
js中的this的指向问题详解
Aug 29 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
理解javascript回调函数
2014/12/28 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
python多线程用法实例详解
2015/01/15 Python
浅析使用Python操作文件
2017/07/31 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
解决Python二维数组赋值问题
2019/11/28 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
七一党日活动总结
2014/07/08 职场文书
2014年药店店长工作总结
2014/11/17 职场文书