寻找正确的方法，如何在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/
相关推荐
**AngularJS 封装 jQuery Datepicker 知识点详解** 在Web开发中，日期选择器是一个常见的组件，用于用户输入日期或选择日期范围。AngularJS 和 jQuery 的结合使用可以为开发者提供更强大的功能和更好的用户体验。这...
标题"angularJS和Jquery"提到了两种JavaScript库——AngularJS和jQuery，它们在前端开发中都有着广泛的应用。AngularJS是Google维护的一个MVC（Model-View-Controller）框架，用于构建复杂的单页应用程序（SPA）。...
这篇博客“AngularJS封装jQuery DateTimepicker”可能是关于如何在AngularJS应用中有效地整合和自定义这个日期时间选择器的教程。 在AngularJS中，我们通常避免直接使用jQuery，因为Angular提供了一套自己的数据...
这篇名为“AngularJS封装jQuery-File-Upload”的博文主要探讨了如何将jQuery-File-Upload的功能整合到AngularJS的应用中，以便充分利用AngularJS的数据双向绑定和模块化特性，同时保持jQuery-File-Upload的强大功能...
标题中的“easyui+jquery插件+angularJS”揭示了这个压缩包可能包含的三个主要技术：EasyUI、jQuery插件以及AngularJS。这三种技术都是前端开发中的关键组件，分别对应于用户界面框架、JavaScript库和单页应用框架。...
本教程将聚焦于如何使用jQuery来模仿AngularJS的TodoList功能，这是一个经典的MVC（Model-View-Controller）模式应用实例，让我们深入了解这两个库的不同之处以及如何在jQuery中实现类似的功能。 首先，AngularJS是...
AngularJS、Bootstrap和jQuery是Web开发中的三大重要框架和库，它们各自在不同的领域发挥着关键作用。这个压缩包提供了这三者的中文手册，对于学习和掌握这些技术来说，是一份非常宝贵的资源。 AngularJS是Google...
本资源提供了一个基于AngularJS、jQuery和Bootstrap的后台管理模板，旨在为开发者创建高效、美观且功能丰富的Web应用程序界面提供便利。这个模板融合了这三个强大的JavaScript库和技术，以实现高度交互性和响应式的...
UI-date 是 AngularJS 一个指令，可以将 jQuery UI 日期选择器添加到您的表单元素。 标签：UIdate
在前端开发领域，jQuery、AngularJS和Bootstrap是三个极为重要的技术框架，它们分别在不同的层面上解决了网页开发中的各种问题，极大地提高了开发效率和用户体验。接下来，我们将详细探讨这三个技术的核心概念、应用...
《疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战》是一本深入浅出的前端开发教程，它涵盖了三个核心的前端技术：jQuery、AngularJS和Bootstrap。这些技术在现代网页开发中扮演着至关重要的角色，使得...
"angularjs-jquery-video-uploader" 是一个基于 AngularJS 和 jQuery 的视频上传解决方案，专门设计用于向 Wistia 平台上传视频。这个项目利用了这两个前端库的强大功能，为用户提供了流畅的视频上传体验。 **描述...
本文主要介绍了如何在同一个项目中混合使用jQuery和AngularJS两种JavaScript框架。虽然不推荐在同一个项目中混合使用这两种框架，但在一些特定情况下，这样做可以带来便利。文中提供了一个示例，展示了在AngularJS...
《疯狂前端开发讲义：jQuery+AngularJS+Bootstrap前端开发实战》是一本专注于前端开发的实践教程，由知名IT作者李刚编著。本书旨在帮助读者深入理解和掌握前端三大热门框架——jQuery、AngularJS和Bootstrap的使用...
ng-clip 这个插件将 AngularJS 的设计理念与 jQuery 的便利性相结合，允许我们在 AngularJS 应用程序中轻松集成剪贴板功能。 **二、ng-clip 插件安装与使用** 1. **安装**：首先，你需要在项目中引入 jQuery 和 ...
Go、AngularJS、jQuery 和 Bootstrap Boilerplate Go web 应用程序：目前使用 forked 支持加载编译资产。模板分隔符Go 模板默认使用{{和}} ，这与 AngularJS 语法不兼容。 此样板用[:和:]替换默认分隔符。资产资产是...
在本篇文章中，我们将探讨如何使用jQuery和AngularJS这两种流行的JavaScript库来实现百分比进度条。 首先，让我们了解jQuery的实现方式。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互...