从 Ajax 加载模型后 AngularJS 更新视图 - IT屋-程序员软件开发技术分享社区
首页 前端开发 从 Ajax 加载模型后 AngularJS 更新视图
从 Ajax 加载模型后 AngularJS 更新视图
[英] AngularJS update View after Model loaded from Ajax
本文介绍了从 Ajax 加载模型后 AngularJS 更新视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 angularjs 开发的新手，我编写了这个简单的应用程序，但不明白如何在启动时从 ajax 请求加载模型后更新视图！
当我将延迟添加到 photos.php 中时，此代码不起作用，使用:睡眠(3)；用于模拟远程服务器延迟！相反，如果 search.php 速度很快，它就可以工作！！
<html ng-app="photoApp"><头><title>相册</title><身体><div ng-view></div><script src="../angular.min.js"></script><脚本>'使用严格';var 照片 = [];//模型var photoAppModule = angular.module('photoApp', []);photoAppModule.config(function($routeProvider) {$routeProvider.when('/照片', {templateUrl: 'photo-list.html',控制器:'listCtrl' });$routeProvider.otherwise({redirectTo: '/photos'});}).run(function($http) {$http.get('photos.php')//延迟加载模型.成功(功能(json){照片 = json;///问题在这里！！如果photos.php 很慢不要更新视图！});}).controller('listCtrl', function($scope) {$scope.photos = 照片；}); </html>photos.php 的输出
[{"file": "cat.jpg", "description": "我家的猫"},{文件":house.jpg"，描述":我的房子"}，{"file": "sky.jpg", "description": "我家的天空"}]photo-list.html
<li ng-repeat="照片中的照片"><a href="#/photos/{{ $index }}"><img ng-src="images/thumb/{{photo.file}}" alt="{{photo.description}}"/></a> 编辑 1，推迟解决方案:
.run(function($http, $q) {var deferred = $q.defer();$http.get('photos.php')//延迟加载模型.成功(功能(json){控制台日志(json)；照片 = json;///问题！！如果photos.php 很慢不要更新视图！deferred.resolve(json);//解决方案！});照片 = deferred.promise;})编辑 2，服务解决方案:
<预><代码>...//需要angular-resource.min.jsangular.module('photoApp.service', ['ngResource']).factory('photoList', function($resource) {var Res = $resource('photos.php', {},{查询:{method:'GET', params:{}, isArray:true}});返回资源；});var photoAppModule = angular.module('photoApp', ['photoApp.service']);....run(function($http, photoList) {照片 = photoList.query();})...
解决方案
简短的回答是:
.controller('listCtrl', ['$scope', '$timeout', function($scope, $timeout) {$超时(函数(){$scope.photos = 照片；}, 0);}]);长答案是:请不要像这样混合使用常规的 javascript 和 angular.重新编写代码，以便 angular 始终知道发生了什么.
var photoAppModule = angular.module('photoApp', []);photoAppModule.config(function($routeProvider) {$routeProvider.when('/照片', {templateUrl: 'photo-list.html',控制器:'listCtrl'});$routeProvider.otherwise({redirectTo: '/photos'});});photoAppModule.controller('listCtrl', ['$scope', function($scope) {$scope.photos = {};$http.get('photos.php')//延迟加载模型.成功(功能(json){$scope.photos = json;//没有更多问题});}]);
I'm newbie of angularjs developing and i wrote this simple app, but don't understand how i can update view, after the model il loaded from ajax request on startup!
This code don't work when I add delay into photos.php, using:
sleep(3);
for simulate remote server delay! instead if search.php is speedy it work!!
<!doctype html>
<html ng-app="photoApp">
<head>
<title>Photo Gallery</title>
</head>
<body>
<div ng-view></div>
<script src="../angular.min.js"></script>
<script>
'use strict';
var photos = []; //model
var photoAppModule = angular.module('photoApp', []);
photoAppModule.config(function($routeProvider) {
$routeProvider.when('/photos', {
templateUrl: 'photo-list.html',
controller: 'listCtrl' });
$routeProvider.otherwise({redirectTo: '/photos'});
})
.run(function($http) {
$http.get('photos.php')//load model with delay
.success(function(json) {
photos = json; ///THE PROBLEM HERE!! if photos.php is slow DON'T update the view!
});
})
.controller('listCtrl', function($scope) {
$scope.photos = photos;
});
</script>
</body>
</html>
output of photos.php
[{"file": "cat.jpg", "description": "my cat in my house"},
{"file": "house.jpg", "description": "my house"},
{"file": "sky.jpg", "description": "sky over my house"}]
photo-list.html
<ul>
<li ng-repeat="photo in photos ">
<a href="#/photos/{{ $index }}">
<img ng-src="images/thumb/{{photo.file}}" alt="{{photo.description}}" />
</a>
</li>
</ul>
EDIT 1, Defer solution:
.run(function($http, $q) {
var deferred = $q.defer();
$http.get('photos.php')//load model with delay
.success(function(json) {
console.log(json);
photos = json; ///THE PROBLEM!! if photos.php is slow DON'T update the view!
deferred.resolve(json);//THE SOLUTION!
});
photos = deferred.promise;
})
EDIT 2, Service solution:
...
//require angular-resource.min.js
angular.module('photoApp.service', ['ngResource']).factory('photoList', function($resource) {
var Res = $resource('photos.php', {},
{
query: {method:'GET', params:{}, isArray:true}
});
return Res;
});
var photoAppModule = angular.module('photoApp', ['photoApp.service']);
...
.run(function($http, photoList) {
photos = photoList.query();
})
...
解决方案
The short answer is this:
.controller('listCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$timeout(function () {
$scope.photos = photos;
}, 0);
}]);
The long answer is: Please don't mix regular javascript and angular like this. Re-write your code so that angular knows what's going on at all times.
var photoAppModule = angular.module('photoApp', []);
photoAppModule.config(function($routeProvider) {
$routeProvider.when('/photos', {
templateUrl: 'photo-list.html',
controller: 'listCtrl'
});
$routeProvider.otherwise({redirectTo: '/photos'});
});
photoAppModule.controller('listCtrl', ['$scope', function($scope) {
$scope.photos = {};
$http.get('photos.php') // load model with delay
.success(function(json) {
$scope.photos = json; // No more problems
});
}]);
这篇关于从 Ajax 加载模型后 AngularJS 更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
