在AngularJS中使用jQuery lite

访问 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允许双向数据绑定;ngShowngHide以编程方式显示或者隐藏元素。

换句话说,我们可以在没有 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

更多: zhilu jiaocheng

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

日期:2020-09-17 00:09:14 来源:oir作者:oir