在開發中,我們常常需要將 jQuery 和 AngularJS 結合使用。將 jQuery 導入到 AngularJS 項目中并不是一件難事,本文將向您介紹如何進行這個過程。
步驟如下:
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS and jQuery</title> <!-- 引入 AngularJS --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <!-- 引入 jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div ng-controller="myCtrl"> <input type="text" ng-model="name"> <button ng-click="hello()">Say Hello</button> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.name = "AngularJS"; $scope.hello = function() { $('input').val('Hello ' + $scope.name + '!'); }; }); </script> </body> </html>
在上面的代碼中,我們通過在 head 標簽中添加 jquery.min.js 的引用來導入 jQuery。在 body 標簽中寫入需要操作的代碼。
接下來,在 JavaScript 部分,我們對模塊和控制器進行了定義。我們可以看到,我們在控制器中使用了 jQuery 的 $ 符號來查找文本框,并使用它來設置輸入框的值。
當在輸入框中鍵入文本并點擊按鈕時,jQuery 配合 AngularJS 將文本框的值設置為一個帶有“Hello”前綴的句子。
此時,我們已經成功將 jQuery 導入到 AngularJS 項目中,并用它來完成了一個簡單的功能。希望這篇文章能夠對您的開發工作有所啟發。