从阿贾克斯装型号后AngularJS更新视图 [英] AngularJS update View after Model loaded from Ajax
本文介绍了从阿贾克斯装型号后AngularJS更新视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我angularjs开发的新手，我写了这个简单的应用程序，但不明白我怎么可以更新视图，模型IL后，从启动Ajax请求加载！
这code不要当我添加延迟到photos.php使用工作，： 睡眠（3）; 为模拟远程服务器延迟！反而如果search.php中是快速它的工作！
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用程序=photoApp＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;图片＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT;脚本的src =../ angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
使用严格的;
变种照片= []; //模型
VAR photoAppModule = angular.module（'photoApp'，[]）;
photoAppModule.config（函数（$ routeProvider）{
$ routeProvider.when（'/照片，{
templateUrl：照片list.html，
控制器：listctrl的'}）;
$ routeProvider.otherwise（{redirectTo：/照片}）;
}）
.RUN（函数（$ HTTP）{
$ http.get（'photos.php'）//负荷延迟模型
.success（函数（JSON）{
照片= json的; ///问题就在这里！如果photos.php慢不更新的观点！
}）;
}）
.controller（'的listctrl'，函数（$范围）{
$ scope.photos =照片;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
photos.php的输出
[{文件：cat.jpg，说明：我的猫在我家}，
{文件：house.jpg，说明：我的房子}，
{文件：sky.jpg并将，说明：天上掌管我的家}]
照片list.html
＆LT; UL＆GT;
＆LT;李NG重复=照片中的照片＆GT;
＆LT; A HREF =＃/照片/ {{$指数}}＆GT;
＆LT; IMG NG-SRC =图像/拇指/ {{photo.file}}ALT ={{photo.description}}/＆GT;
＆所述; / a取代;
＆LT; /李＆GT;
＆LT; / UL＆GT;
修改1，推迟解决办法：
.RUN（函数（$ HTTP，$ Q）{
VAR推迟= $ q.defer（）;
$ http.get（'photos.php'）//负荷延迟模型
.success（函数（JSON）{
执行console.log（JSON）;
照片= json的; ///问题！！如果photos.php慢不更新的观点！
deferred.resolve（JSON）; //解决方案！
}）;
照片= deferred.promise;
}）
编辑2，服务的解决方案：
...
//需要角resource.min.js
angular.module（'photoApp.service'，['ngResource']）。厂（photoList'，函数（$资源）{
VAR RES = $资源（'photos.php'，{}，
{
查询：{方法：GET，则params：{}，IsArray的：真正}
}）;
返回水库;
}）;
变种photoAppModule = angular.module（'photoApp'，['photoApp.service']）;
...
.RUN（函数（$ HTTP，photoList）{
照片= photoList.query（）;
}）
...
解决方案
简短的回答是这样的：
.controller（'的listctrl'，['$范围，$超时'，函数（$范围，$超时）{
$超时（函数（）{
$ scope.photos =照片;
}，0）;
}]）;
长的答复是：请不要混合使用常规的JavaScript和角度是这样的。重新编写code，这样棱角分明知道什么是在任何时候都怎么回事。
VAR photoAppModule = angular.module（'photoApp'，[]）;
photoAppModule.config（函数（$ routeProvider）{
$ routeProvider.when（'/照片，{
templateUrl：照片list.html，
控制器：'的ListCtrl
}）;
$ routeProvider.otherwise（{redirectTo：/照片}）;
}）;
photoAppModule.controller（'的listctrl'，['$范围'，函数（$范围）{
$ scope.photos = {};
$ http.get（'photos.php'）//负荷延迟模型
.success（函数（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
});
}]);
这篇关于从阿贾克斯装型号后AngularJS更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
