如何在AngularJs中调用第三方插件库

2024-10-27 11:37:09

在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中引用了第三方插件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解Angular-Cli中引用第三方库

最近在学习angular(AngularJS 2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题... 初试我最初的想法是直接将相对路径写到index.html即可,如下: <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow&qu
Angular如何引入第三方库的方法详解

最近在学习Angular方面的知识,今天学习了Angular中使用第三方的库,分享给大家如果我们想在Angular中使用第三方的库,比如jquery或bootstrap等,该如果做呢? 首先我们先来看看package.json这个文件,在目录介绍那篇博客中我们已经知道,package.json这个文件列出了项目所使用的第三方依赖包.我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中. 需要注意的是: package.json中有dep
如何在AngularJs中调用第三方插件库

在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库.我们不能散乱的在AngularJS中引入这些库,例如在controller中.那么应该怎么在Angular中使用第三方库呢? 如何使用? 很简单,给插件写一个directive. 在这里,我会使用一个简单的jquery插件Toolbar.js 的DEMO. 这是我们如何在jquery中创建一个tooltip的:  <div id="
angular2中使用第三方js库的实例

本文以jquery 为例第一种:有对应的声明文件的 1.用命令安装jQuery的声明文件.(声明文件是为了ide完美智能提示) npm install -D @types/jquery 2.引入jquery import * as $ from 'jquery'; 3.使用 $('body').addClass(''); 第二种:没有声明文件,自定义的js库 1. index.html中引入 js 文件 <script src="/assets/jquery.min.js"&g
Angular5中调用第三方js插件的方法

话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli.json文件中配置步骤: 1.在项目根目录.angular-cli.json文件中找到script字段,在数组中添加要引用的所有js文件(注意先后顺序) "scripts": ["assets/jquery-3.2.1.js","assets/jquery
如何在IOS中使用Cordova插件

一.准备插件功能:打开IOS相机 1:创建插件 plugman create --name [插件名称] --plugin_id [插件ID] --plugin_version [插件版本号] plugman create --name CameraDemo --plugin_id cordova-plugin-camerademo --plugin_version 1.0.0 2:添加IOS平台 plugman platform add --platform_name ios 3:创建pac
实例学习如何在ASP中调用DLL

本文通过VB5.0创建ActiveX DLL文件,这个文件模拟了一个掷色子的过程,向大家介绍如何在ASP中调用DLL的文章专题. 动态联接库(DLL)是加快应用程序关键部分的执行速度的重要方法,但有一点恐怕大部分人都不知道,那就是在ASP文件也能通过调用DLL来加快服务器的执行速度,下面我简单的介绍一下在ASP文件调用DLL的步骤. 首先,必须得有DLL文件,本例是通过VB5.0创建ActiveX DLL文件,这个文件模拟了一个掷色子的过程. 在VB5.0的环境下,新建一个工程,并双击新建工
如何在C#中调用COM组件

一.引言 COM(Component Object Modele,组件对象模型)是微软以前推崇的一个开发技术,所以现在微软的很多产品都用到了COM组件,如Office,IE 等.然而如果.NET 平台下的程序想访问COM组件的方式来实现某个功能怎么办呢? 正是由于开发人员有这个需求,所以微软在.NET FrameWork中为COM和托管代码之间进行互操作提供了支持,这种互操作性的技术就是COM Interop. 但是COM Interop(COm互操作)这项技术,不仅支持在托管代码中使用COM对
如何在C++中调用Python

Python的安装为了使用Python.h这个扩展项,我们需要安装一个python*-dev而不是python*,这两者略有区别,下面的案例展示的是在Ubuntu20.04下安装python3.9-dev的方法: dechin@ubuntu2004:~/projects/gitlab/dechin/$ sudo apt install python3.9-dev 正在读取软件包列表... 完成正在分析软件包的依赖关系树正在读取状态信息... 完成下列软件包是自动安装的并且现在不需要了:
如何在Java中调用python文件执行详解

目录一.Java内置Jpython库(不推荐) 1.1 下载与使用 1.2 缺陷二.使用Runtime.getRuntime()执行脚本⽂件 2.1 使用 2.2 缺陷三.利用cmd调用python文件 3.1 使用 3.2 优化总结一.Java内置Jpython库(不推荐) 1.1 下载与使用可以在官网下载jar包,官网:http://ftp.cuhk.edu.hk/pub/packages/apache.org/ 或者使用maven进行jar包下载 <dependency> &
如何在UpdatePanel中调用JS客户端脚本

页面中加入了UpdatePanel后,Response.Write("<script>function dis (){alert('这是调用写在server的JS');}</script>")来调用客户端脚本,无任何提示的无反应.如何在UpdatePanel中调用JS客户端脚本呢? 方法:采用 ScriptManager.RegisterStartupScript(Control controlId,Type this.GetType(),String key,
Python如何在main中调用函数内的函数方式

一般在Python中在函数中定义的函数是不能直接调用的,但是如果要用的话怎么办呢? 一般情况下: def a():#第一层函数 def b():#第二层函数 print('打开文件B') b()#第二层中的函数直接调用结果显示: Traceback (most recent call last): File "C:/Users/rog/Desktop/wenzhang.py", line 4, in <module> b() NameError: name 'b' is

如何在AngularJs中调用第三方插件库

相关推荐

随机推荐