angularjs中如何在異步請求執行完以后再執行其他函數?
之前腦袋回路就是從上到下的執行js,直到有一次我的頁面上已經顯示了空才走到angularjs里的$http的成功回調函數里,然后才開始正視工程里異步請求對項目的影響。
第一反應是放回調就可以了:
var app = angular.module('myApp', []); app.controller('testCtrl', function($scope, $http) { $http({ method: 'GET', url: 'xxx' }).then(function succ(data) { $scope.testSucc(); }, function err(data) { $scope.testErr(); }); $scope.testSucc = function(){ console.log("success func"); } $scope.testErr = function(){ console.log("error func"); } });
但是如果其他函數($scope.testSucc、$scope.testErr())不是這個控制器里的呢?對,你可以使用廣播事件,然后在其子控制器里監聽這個回調結果,但是我不喜歡這種方法,因為一個函數還好,如果是整個頁面都依賴這個這個結果,不會累死啊。
我使用了一個小技巧:angularjs的控制器執行是在頁面加載這個控制器所對應的頁面的時候才會執行,所以在異步請求前設置頁面不加載,異步請求成功的函數里設置頁面加載就可以了。這里就利用了ng-if的特點了:ng-if 在后面表達式為 true 的時候才創建這個 dom 節點。
html頁面如下:
<body> <div ng-app="myApp" ng-controller="fatherCtrl"> <div ng-if="succResult" ng-controller="childrenCtrl"> <p>{{data}}</p> </div> </div> </body>
js:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.succResult = false; $http({ method: 'GET', url: 'xxx' }).then(function succ(data) { $scope.succResult = true; $scope.data=data; }, function err(data) { $scope.testErr(); }); });
以上是我利用ng-if和$http實現異步回調的效果。