如何在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 相关文章推荐
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
javascript实现回到顶部特效
May 06 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
python爬取网易云音乐评论
2018/11/16 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
详解python内置模块urllib
2020/09/09 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
平面设计岗位职责
2013/12/14 职场文书
办理居住证介绍信
2014/01/15 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
国庆节演讲稿
2014/05/27 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
总结几个非常实用的Python库
2021/06/26 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电