访问 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 功能,但包含了大部分功能。