访问 jQuery 或者 jQuery Lite
对于大多数 AngularJS 应用程序,AngularJS 内置的 jQuery lite 库就足够了。
但是,如果我们需要完整版 jQuery 的添加功能,只需在加载 AngularJS 库之前加载 jQuery 库。
例如:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
无论是加载 jQuery lite 还是完整的 jQuery 库,都可以使用 AngularJS 引导时可用的 angular变量的 element属性从 AngularJS 代码访问 jQuery。
本质上,angular.element将是通常在 jQuery 应用程序中使用的 jQuery变量的别名。
你可以考虑如下:
angular.element() === jQuery() === $()
使用Angular方式
在AngularJS中,应该尽量避免使用 jQuery/jqLite 来直接操作 DOM 对象。
AngularJS 附带了一整套工具,使这变得非常容易;使用 ngClass我们可以动态更新类;ngModel允许双向数据绑定;ngShow和 ngHide以编程方式显示或者隐藏元素。
换句话说,我们可以在没有 DOM 操作的情况下做各种令人敬畏的事情。
DOM 操作越少,指令越容易测试,它们越容易设计样式,它们在未来越容易改变,它们的可重用性和可分发性越强。
这是可切换按钮的快速示例:
.directive( 'myDirective', function () {
return {
template: '<a class="btn">Toggle me!</a>',
link: function ( scope, element, attrs ) {
var on = false;
$(element).click( function () {
on = !on;
$(element).toggleClass('active', on);
});
}
};
});
该指令可以更简单地重写,如下所示:
.directive( 'myDirective', function () {
return {
scope: true,
template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
link: function ( scope, element, attrs ) {
scope.on = false;
scope.toggle = function () {
scope.on = !scope.on;
};
}
};
});
与以前的版本相比,它更清晰、可维护且更易于测试,在任何不存在 jQuery 的环境中都将很容易被破坏。
参考资料:
https : //docs.angularjs.org/api/ng/function/angular.element
jQuery 示例
<div ng-click="clicked($event)">Click Me</div>
//You can access a jQuery version of the object using the following AngularJS code:
$scope.clicked = function(event){
var jQueryElement = angular.element(event.target);
//Now perform jQuery actions on jQueryElement
};
如何在 AngularJS 应用程序中使用 jQuery lite?
AngularJS 添加了 MVC 模式以及许多其他内置服务的功能。
虽然,可以将 jQuery 库与 angular 一起使用,但建议使用默认情况下打包在 AngularJS 中的 jQuery lite。
它是 jQuery 的精简版,也就是说,它缺少一些 jQuery 功能,但包含了大部分功能。
