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实现异步回调的效果。函数