AngularJS是一個強大的前端框架,它為我們的開發提供了很多方便的功能。而jQuery也是一個非常流行的JavaScript庫,提供了大量的工具函數,使得我們能夠更加方便地操作DOM、進行事件綁定等等。那么在AngularJS中如何使用jQuery呢?
其實在AngularJS的官網中已經給出了一個非常簡單的解決方案,我們只需要在index.html頁面中引入jQuery庫,然后在app.js中將$(jQuery)注入我們的AngularJS應用中就可以了。這個過程被稱為叫做“注入jQuery”,很容易理解。
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="app.js"></script>
var app = angular.module('myApp', []); // 將$注入AngularJS應用中 app.factory('$', function () { return $; });
同時,我們可以在自己的自定義指令或者控制器中使用$對象,來調用jQuery的方法,如下面的例子:
app.directive('myDirective', function () { return { restrict: 'EA', link: function (scope, element, attrs) { // 使用$對象調用jQuery方法 $('#myDiv').hide(); } } });
看到這里,你應該已經明白怎樣在AngularJS中引入jQuery并使用了吧。當然,這并不是一個官方推薦的做法,如果你可以不用jQuery就不要用,因為jQuery會增加頁面的大小,同時帶來了一定的性能和維護上的問題。