angularjs中如何在異步請求執行完之後再執行其餘函數？

時間 2019-11-19

標籤 angularjs 如何異步請求執行之後其餘函數欄目 AngularJS 简体版

原文原文鏈接

angularjs中如何在異步請求執行完之後再執行其餘函數？javascript

以前腦殼迴路就是從上到下的執行js，直到有一次個人頁面上已經顯示了空才走到angularjs裏的$http的成功回調函數裏，而後纔開始正視工程裏異步請求對項目的影響。html

第一反應是放回調就能夠了：java

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

我使用了一個小技巧：angularjs的控制器執行是在頁面加載這個控制器所對應的頁面的時候纔會執行，因此在異步請求前設置頁面不加載，異步請求成功的函數裏設置頁面加載就能夠了。這裏就利用了ng-if的特色了：ng-if 在後面表達式爲 true 的時候才建立這個 dom 節點。app

html頁面以下：dom

<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實現異步回調的效果。函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。