AngularJS 異步解決實現(xiàn)方法
Angular 的異步處理的真的很不錯。基于消息廣播的方式，并且可以向上傳遞，基本上解決了不同模塊，不同controller之間不方便異步的問題。
場景一：通過回調(diào)函數(shù)進行異步操作(該情況下不用消息廣播的機制)
這種情況的特點是直接傳遞一個回調(diào)函數(shù)給異步操作就可以了，等異步操作完執(zhí)行回調(diào)。
比如：controller通過server異步取數(shù)據(jù)，等取完數(shù)據(jù)進行一系列的操作，這個時候就可以把操作封裝到函數(shù)中，傳遞給異步操作函數(shù)。
controller代碼片段舉例如下：
$scope.submit=function(){ userService.login($scope.user.loginname.value,$scope.user.password.value,function(data){ if(data.success){ location.href = '../../views/main/index.html'; }else{ $scope.user.error.tip=data.msg; } }); }; 最后一個參數(shù)即為回調(diào)函數(shù)
server代碼片段舉例如下：
return { http:$http, token:'', auth:[], loginname:'', login:function(loginname,password,fn){ this.http({ url:'../../scripts/loginModule/services/loginOKTest.js', method:'GET' }) .success(function(data){ if(data[0].success){ ... //調(diào)用回調(diào)方法 fn(data[0]); } }) .error(function(data,header,config,status){ alert("驗證服務(wù)請求失敗！"); }); } } 場景二：沒有傳遞回調(diào)函數(shù)的地方，這個時候就必須用到消息廣播的機制。
比如：我的controller通過server異步獲取數(shù)據(jù)，這個時候我用回調(diào)函數(shù)保證取到數(shù)據(jù)后做后續(xù)操作。但是我的后續(xù)操作需要通過指令進行DOM的生成。這個時候我們是沒有辦法直接調(diào)用指令的link或者compile的。這個時候我們需要用到廣播$scope.$broadcast。發(fā)送廣播以后，需要通過$scope.$on進行監(jiān)聽。
controller代碼片段舉例如下：
//通過categoryService異步取數(shù)據(jù) categoryService.initCategory(loginname,token,function(category){ $scope.category=category; $scope.$broadcast("categoryLoaded"); }); service代碼片段舉例如下：
initCategory:function(loginname,token,fn){ this.http({ url:'../../scripts/mainModule/services/mainCategory.js', method:'GET' }).success(function(data,header,config,status){ fn(data); }).error(function(data,header,config,status){ alert("驗證服務(wù)請求失敗！"); }); } directive代碼片段舉例如下：
link:function ($scope, $elem, attrs) { $scope.$on("categoryLoaded", function (event, args) { //$scope.category即為異步獲取的數(shù)據(jù) } } 最后，如果我們在這個controller中需要調(diào)用另外一個模塊的指令的link或者compile或者另一個模塊的controller怎么辦。我們需要通過依賴注入$rootScope服務(wù)，因為他是所有作用域的父，然后調(diào)用$emit這個服務(wù)進行廣播。指令中通過$rootScope.$on進行接收即可。
模塊1(app.video)中的controller代碼片段舉例如下：
$scope.replay=function(id){ console.log("click replay id:"+id); clearReply(); //通過$rootScope廣播消息給app.dialog模塊的controller $rootScope.$emit("openTemplate","reply.html"); }; 模塊2(app.dialog)中的controller代碼片段舉例如下：
$rootScope.$on('openTemplate',function(event, toState, toParams, fromState, fromParams){ $scope.openTemplate(toState); }); $scope.openTemplate = function (url) { if(!url) url="/ZVideo-MVC/dialog/defaultTemplate.html"; $scope.value = true; ngDialog.open({ template: url, className: 'ngdialog-theme-plain', scope: $scope }); }; 感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
