我的堆栈使用Angular 1.x，当我调用API并将响应存储在$rootScope中时，其他控制器的视图中无法访问该响应。
我的控制器：
angularApp.controller('mainController', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http){
var checkIfAuthenticated = function(){
return $http.get('/api/isAuthenticated');
};
checkIfAuthenticated()
.then(function(res) {
if(res.status===200){
console.log("Success");
$rootScope.userLoggedIn = true;
}
})
}]);
现在，在另一个控制器的视图中，我这样使用它：
<div ng-if="userLoggedIn" class="py-1 pl-1 pr-1">
<span><b>Message Board</b></span>
<div class="form-control" readonly id="lockTextbox">Show something</div>
</div>
问题是，API调用/api/isAuthenticated确实提供了正确的响应(状态200(，但ng-view得到了错误的响应。
我确信这与$rootScope.userLoggedIn是异步调用的响应有关(当我在控制台中获得Success时(，但我该如何解决它？
提前感谢！
编辑
在我发布了这个问题之后，我注意到在mainController的视图中，ng-if逻辑也不起作用。非常奇怪的是，当我打开浏览器的调试控制台时，它就开始工作了！我认为这只是一个异步问题，但我不知道如何解决。我如何告诉视图变量正在运行？
好的，为了解决时间问题，我将完全修改答案。这应该是一个快速而肮脏但有效的例子：
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl as $ctrl">
<h1>Hello {{$ctrl.name}}</h1>
<p>Start editing and see your changes reflected here!</p>
<div ng-if="$ctrl.name === 'Angular.js'"><b>Message Board</b</div>
</div>
</body>
</html>
script.js
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope, $http) {
const self = this;
self.name = 'Plunker';
console.log('hello');
function checkIfAuthenticated(){
console.log('get');
return $http.get('https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js');
};
checkIfAuthenticated().then(function(res) {
if(res.status===200){
console.log('Success');
self.name = 'Angular.js'; // insert any logic here
} else {
console.log('Failed');
}
})
});
控制台
hello
get
Success
它对你有用吗？
工作示例
下面的演示显示了$rootScope变量在两个控制器中都可用，该变量是从延迟两秒的promise中设置的。
angular.module("app",[])
.controller('mainController', function($scope, $rootScope, $timeout) {
var checkIfAuthenticated = function(){
return $timeout(function() {
return { status: 200 };
}, 2000);
};
checkIfAuthenticated()
.then(function(res) {
if(res.status===200){
console.log("Success");
$rootScope.userLoggedIn = true;
}
})
})
.controller('otherController', function($scope) {
console.log("other controller");
})<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<fieldset ng-controller="mainController">
MAIN Controller userLoggedIn={{userLoggedIn}}<br>
<div ng-if="userLoggedIn">
Message Board - Show something
</div>
</fieldset>
<fieldset ng-controller="otherController">
OTHER Controller userLoggedIn={{userLoggedIn}}
<div ng-if="userLoggedIn">
Message Board - Show something
</div>
</fieldset>
</body>我发现了问题。我将我的Angular从1.6.4更新到1.7.9(以及所有模块，如Angular消毒液等(，这就成功了。应该是我做的第一件事，但我完全错过了