很多時候angularJS的便利性讓我們在開發網路應用程式變得非常方便,尤其是ng-repeat與ng-model,能夠讓我們瞬間更換頁面上面的資訊,不用再像傳統的jQuery的做法,必須要根據selector去一一更換。
即便如此,我們還是有需要使用到jQuery的時候,尤其是當Web Designer不熟悉angularJS時,他設計好的模板就只能支援jQuery(如Modal的功能)。
因此,讓兩者可以並存並且共同發揮其專長就變得很重要了。
假設我們寫了一個 angularJS的 function,$scope.loadCandidate(),需要在jQuery去呼叫他,方法如下:
//HTML
<div id="myCtrl" ng-app="myApp" ng-controller="myCtrl">
</div>
//AngularJS
var app = angular.module("myApp",[]);
app.controller("myCtrl", function($scope){
$scope.loadSmt = function(){
//do something
}
});
//jQuery
function callMe(){
angular.element(document.querySelector('#myCtrl')).scope().loadSmt(); //強迫angularjs的function被執行
angular.element(document.querySelector('#myCtrl')).scope().$apply(); //記得下apply來觸發angularjs的【update】機制
}
發佈留言