在HTML上,我有一个覆盖div来显示使用指令ng-show="showLoading"
的加载进度。在模板ng-click
上我打电话给控制器searchRequest
方法。此方法在发出http请求之前将showLoading
更新为true。
如果我这样做,加载不会显示,如果我使用$scope.$apply
来更新变量,那么我得到$apply already in progress
错误消息。到底是怎么回事?我应该怎么做?
这是index.html的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/angular-route.js" ></script>
<!-- your app's js -->
<script src="js/searchController.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-init="showLoading = false">
<div id="overlay" ng-show="showLoading">
<img id="loading" src="img/ajax-spinner.gif" />
</div>
<div ng-view></div>
</body>
</html>
模板:
<div ng-controller="searchController as searchController">
<ion-header-bar class="bar-stable">
<h1 class="title">Movie Searcher</h1>
</ion-header-bar>
<ion-content>
<label class="item item-input">
<span class="input-label">Title</span>
<input style="border-style: solid;border-width: 1px;" type="text" ng-model="searchController.searchString" required>
</label>
<button class="btn" ng-click="searchController.search()">Search</button>
{{response}}
</ion-content>
</div>
而且控制器:
this.searchRequest = function(url) {
$scope.showLoading = true;
$http.get(url).success(function(data) {
$scope.showLoading = false;
//console.log("Success: " + JSON.stringify(data));
$scope.response = JSON.stringify(data);
for (i=0; i<data.length; i++) {
var movie = data[i];
//console.log("Movie: " + movie);
var genres = '';
for (j=0; j<movie.genres.length; j++) {
genres += movie.genres[j];
if (j < movie.genres.length - 1) {
genres += ', ';
}
}
console.log("Title: " + movie.title);
console.log("Plot: " + movie.simplePlot);
console.log("genres: " + genres);
}
})
.error(function(data, status, headers, config) {
$scope.showLoading = false;
$scope.response = "Error: " + status;
})};
我在控制器上看不到'search'方法,也没有提及'$ scope。$ apply'。我建议你尽量减少相关的代码片段并把它放在一个[jsfiddle](http://jsfiddle.net/)中,这样人们(甚至你自己)都有很好的机会来玩弄它,了解你的代码中发生了什么。 – Domi 2014-10-08 02:25:43
搜索方法只是创建url并调用searchRequest方法,我试图只把相关的代码搞砸了:-P无论如何,如何把它放在一个jsfiddle?我有2个js,1个用于路由,另一个是这个控制器,我可以将它们都粘贴到jsfiddle的JS框中吗? – momo 2014-10-08 02:41:35
如果您正在寻找泛型覆盖,并且希望避免在每个ajax调用上维护showLoading属性,那么使用http拦截器可以很好地实现(从最开始)来自Dan Wahlin。检查出来.. https://github.com/DanWahlin/AngularOverlay/blob/master/app/directives/wcAngularOverlay.js – PSL 2014-10-08 02:57:38