i'm newbie of angularjs developing , wrote simple app, don't understand how can update view, after model il loaded ajax request on startup!
this code don't work when add delay photos.php, using: sleep(3); simulate remote server delay! instead if search.php speedy 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 delay .success(function(json) { photos = json; ///the problem here!! if photos.php slow don't update view! }); }) .controller('listctrl', function($scope) { $scope.photos = photos; }); </script> </body> </html> output of photos.php
[{"file": "cat.jpg", "description": "my cat in house"}, {"file": "house.jpg", "description": "my house"}, {"file": "sky.jpg", "description": "sky on 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 delay .success(function(json) { console.log(json); photos = json; ///the problem!! if photos.php slow don't update 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 this:
.controller('listctrl', ['$scope', '$timeout', function($scope, $timeout) { $timeout(function () { $scope.photos = photos; }, 0); }]); the long answer is: please don't mix regular javascript , angular this. re-write code angular knows what's going on @ 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 delay .success(function(json) { $scope.photos = json; // no more problems }); }]); 
Comments
Post a Comment