我是Angular JS的新手,但在使用Javascript方面有很好的经验.
在我的应用程序中,我正在创建一个由来自Web服务的JSON数据实现的简单工厂:
.factory('Tools', function($http) {
var tools = {content:null};
var promise = $http.get('/Tool/GetTools').success(function(data) {
tools.content = data;
//At this points all the data is on tools.content
});
return {
promise:promise,
all: function(){
return tools;
//At this point tools equals to null
}
}
});
但是当我想渲染列表时:
<ion-list>
<ion-item ng-repeat="tool in tools">
Hello, {{tool}}!
</ion-item>
</ion-list>
信息还没有.
我的控制器上有这个:
.controller('AccountCtrl', function($scope, Tools) {
$scope.tools = Tools.all();
});
有没有办法在列表呈现之前从ajax调用加载Tools对象时告诉列表"等待"？
谢谢!
您必须从工厂返回承诺并进入控制器,您可以检查成功.这样的事情:(我已经模拟等待超时)
angular.module('App', [])
.controller('Ctrl', function($scope, resultsFactory) {
$scope.results = [{txt: 'Loading..'}];
resultsFactory.all().then(
function(res){
$scope.results = res;
},
function(err){
console.error(err);
}
);
})
.factory('resultsFactory', function($http, $timeout, $q) {
var results = {};
function _all(){
var d = $q.defer();
$timeout(function(){
d.resolve([{txt:'one'},{txt:'two'},{txt:'three'}]);
}, 2000);
return d.promise;
}
results.all = _all;
return results;
});<!DOCTYPE html>
<html ng-app='App'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller='Ctrl'>
<p ng-repeat='res in results'> {{res.txt}}</p>
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
15704 次 |
| 最近记录： |