如何在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传递变量: 值传递?引用传递?
Feb 22 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
jQuery DOM操作实例
Mar 05 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
Javascript之String对象详解
Jun 08 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
ES6关于Promise的用法详解
May 07 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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程序员应该了解MongoDB的五件事
2013/06/03 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
原生js调用json方法总结
2018/02/22 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python环境变量设置方法
2016/08/28 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
详解python深浅拷贝区别
2019/06/24 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
PHP笔试题
2012/02/22 面试题
error和exception有什么区别
2012/10/02 面试题
元旦联欢会感言
2014/03/04 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
安全生产奖惩制度
2015/08/06 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android