搭配AngularJS與jQuery一起使用

很多時候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】機制
}

 


留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *