快捷導(dǎo)航

如何在AngularJs中調(diào)用第三方插件庫(kù)

更新時(shí)間：2017年05月21日 13:38:18 作者：vuturn

在AngularJs中我們會(huì)不可避免的使用第三方庫(kù)，這篇文章主要介紹了如何在AngularJs中調(diào)用第三方插件庫(kù)，有興趣的可以了解下

在AngularJs中我們會(huì)不可避免的使用第三方庫(kù)，例如jquery插件庫(kù)。我們不能散亂的在AngularJS中引入這些庫(kù)，例如在controller中。那么應(yīng)該怎么在Angular中使用第三方庫(kù)呢？

如何使用？

很簡(jiǎn)單，給插件寫(xiě)一個(gè)directive。

在這里，我會(huì)使用一個(gè)簡(jiǎn)單的jquery插件Toolbar.js 的DEMO。

這是我們?nèi)绾卧趈query中創(chuàng)建一個(gè)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中使用

在這里我們自定義一個(gè)元素屬性'toolbar-tip'--這使我們要寫(xiě)的Angular directive。我們改寫(xiě)下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>

這里需要注意的一點(diǎn)是：我們把toolbar的options全部寫(xiě)到了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>

這樣就很簡(jiǎn)單的在Angular中引用了第三方插件。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能,涉及AngularJS使用ng-blur、ng-focus針對(duì)表單事件監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開(kāi)始先進(jìn)行了簡(jiǎn)單的介紹，而后通過(guò)完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-12-12
分享使用AngularJS創(chuàng)建應(yīng)用的5個(gè)框架
如果你計(jì)劃使用AngularJS創(chuàng)建你的Web應(yīng)用，那現(xiàn)在就開(kāi)始吧。你不需要有任何的恐懼和擔(dān)心，因?yàn)楝F(xiàn)在有很多的框架都可以很好地支持AngularJS
2015-12-12
詳解AngularJs ui-router 路由的簡(jiǎn)單介紹
本篇文章主要介紹了AngularJs ui-router 路由的簡(jiǎn)單介紹。簡(jiǎn)單明了的說(shuō)明了ngRoute和ui-router的區(qū)別和用法，有興趣的可以了解一下
2017-04-04
使用AngularJS編寫(xiě)多選按鈕選中時(shí)觸發(fā)指定方法的指令代碼詳解
最近做項(xiàng)目時(shí)遇到了需要用到多選按鈕選中觸發(fā)事件的功能，小編試著手寫(xiě)一個(gè)指令，具體實(shí)現(xiàn)代碼大家參考下本文吧
2017-07-07
利用require.js與angular搭建spa應(yīng)用的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于利用require.js與angular搭建spa應(yīng)用的方法實(shí)例，文中通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。
2017-07-07
模板視圖和AngularJS之間沖突的解決方法
這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實(shí)例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下
2016-11-11
AngularJs用戶登錄問(wèn)題處理（交互及驗(yàn)證、阻止FQ處理）
這篇文章主要為大家詳細(xì)介紹了AngularJs用戶登錄問(wèn)題處理，包括交互及驗(yàn)證、阻止FQ處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
AngularJS 基礎(chǔ)ng-class-even指令用法
本文主要介紹AngularJS ng-class-even 指令,這里整理了ng-class-even基礎(chǔ)知識(shí)資料,并附實(shí)例代碼和效果圖,學(xué)習(xí)AngularJS指令的朋友可以看下
2016-08-08