寻找正确的方法,如何在AngularJS里使用jQuery
一、为什么还是要使用jquery
在使用Angular一段时间后,发现还是很难逃脱jquery 插件的魔掌。尽管对于angular,内置了jQLite.
但是为了更好的实现功能,不可避免的要使用一些jquery的插件。
二、如何在Angular里使用jquery
1. 如果使用jquery的插件,我们不应该把对应的code放到controller里面。我们应该创建directive,然后通常把jquery的code放在 link里面
2. 当我们引入jquery 插件库的时候,我们要保证是在最后倒入的,在angularjs,controllers,services,filters结束后引入
三、实践Plunker
如何在angular里使用jcrop
HTML
<!DOCTYPE html> <html ng-app="angularjs-starter"> <head lang="en"> <meta charset="utf-8"> <title>Custom Plunker</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <script src="//deepliquid.com/projects/Jcrop/js/jquery.min.js"></script> <script src="//deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="style.css"> <script> document.write('<base href="' + document.location + '" />'); </script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <h1>Hello </h1> <button ng-click='img = "http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg"'>Orig</button> <button ng-click='img = "http://api.ning.com/files/ZC4177QOYrNFCalnvSMuQhhDHuDSN983R6Cu41iPxpbyxGhX*8BhXoXmBEcGH-zUvSNHnUxlcEJA0BZdf9ch8Q10kP8-BszV/daisy0.jpg"'>Kitten</button> <img-cropped src='' selected='selected(cords)'> </body> </html>
JS
var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.selected = function(x) { console.log("selected",x); }; }); app.directive('imgCropped', function() { return { restrict: 'E', replace: true, scope: { src:'@', selected:'&' }, link: function(scope,element, attr) { var myImg; var clear = function() { if (myImg) { myImg.next().remove(); myImg.remove(); myImg = undefined; } }; scope.$watch('src', function(nv) { clear(); if (nv) { element.after('<img />'); myImg = element.next(); myImg.attr('src',nv); $(myImg).Jcrop({ trackDocument: true, onSelect: function(x) { scope.$apply(function() { scope.selected({cords: x}); }); } }); } }); scope.$on('$destroy', clear); } }; });
参考
Correct way to integrate Jquery plugins in Angular.js
An approach to use jQuery Plugins with AngularJS
Use jQuery Plugin With AngularJS the Easy (Lazy) Way
原文:http://gyf1.com/blog/2014/03/20/angularjs-jquery-%E5%85%B1%E5%AD%98%E6%B3%95%E5%88%99/
相关推荐
NULL 博文链接:https://bijian1013.iteye.com/blog/2110609
AngularJS1.5.8和Jquery3.2.1 JS文件 enenenenenenenenenen
city-picker,jquery-ztree,jquery-ocupload,jquery-cookie,kindeditor,angularJS
NULL 博文链接:https://bijian1013.iteye.com/blog/2110611
用Jquery模仿AngularJs主页的ToDoList功能
angular+jquery+bootstrap后台模板, 分别用angularjs和jquery完成。
UI-date 是 AngularJS 一个指令,可以将 jQuery UI 日期选择器添加到您的表单元素。 标签:UIdate
该附件包含angularjs1.3版本API中文手册, bootstrap中文手册以及jquery1.8中文手册,有需要的可以自行下载
NULL 博文链接:https://bijian1013.iteye.com/blog/2111087
AngularJS, JavaScript, and jQuery All in One, Sams Teach Yourself 英文无水印转化版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,...
《疯狂前端开发讲义 jQuery+AngularJS+Bootstrap前端开发实战》源码
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
Go、AngularJS、jQuery 和 Bootstrap Boilerplate Go web 应用程序:目前使用 forked 支持加载编译资产。模板分隔符Go 模板默认使用{{和}} ,这与 AngularJS 语法不兼容。 此样板用[:和:]替换默认分隔符。资产资产是...
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11。 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是,不行。因为现实生活是非常残酷的。举个栗子...
jquery和angularJS两种百分比进度条实现方式
主要介绍了jquery操作angularjs对象的相关资料,需要的朋友可以参考下
这是Hai Zheng撰写的AngularJS&jQuery&PHP的ajax即时贴。 自述文件 下载到本地服务器。 确保data.txt和md5.txt可写。 通过浏览器访问stickyNotes.html,例如或 如果遇到任何问题,请记住打开开发人员工具进行...
angular.treeview, 基于AngularJS的Treeview ( 无 jQuery ) Angular Treeview纯 AngularJS 基于树菜单指令。 安装将脚本和css复制到项目中,并向页面中添加脚本和链接标记。<script type="text/javascript" src=...
本系列课程第一季专注于WEB前端工程师必备技能H5、C3、JS、jQuery和拓展技能Node.js、AngularJS、MongoDB等技术的实战训练,囊括了前端程序员所必备的技能集合。 通过数十个配套案例讲解基础知识,通过两个实战项目...