如何在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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
Bootstrap实现模态框效果
Sep 30 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 Cookie的一个使用注意点
2008/11/08 PHP
PHP 模拟$_PUT实现代码
2010/03/15 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jquery操作select大全
2014/04/25 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
浅谈python中的占位符
2017/11/09 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
降低python版本的操作方法
2020/09/11 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
四年级下册教学反思
2014/02/01 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
个人欠款担保书
2014/05/20 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
作文评语怎么写
2014/12/25 职场文书