Обновление AngularJS Просмотр после загрузки модели с Ajax

Я новичок в разработке angularjs, и я написал это простое приложение, но не понимаю, как я могу обновить представление после того, как модель il загрузилась из запроса ajax при запуске!Обновление AngularJS Просмотр после загрузки модели с Ajax

Этот код не работает, когда я добавляю задержку на photos.php, используя: sleep (3); для имитации задержки удаленного сервера! вместо этого, если search.php работает быстро!

<!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>

выход 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"}]

фото-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>

РЕДАКТИРОВАТЬ 1, Перенести решение:

.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, Услуги Решение:

... 
//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(); 
}) 
...

источник

2013-05-05 StefanoCudini

Вы должны связать элемент в вашей точки зрения к свойству (простой или объекта) вашего $scope объекта. После обновления объекта $ scope представление должно быть обновлено самостоятельно. Это красота AngularJS.

EDIT: Пожалуйста, зарегистрируйтесь контроллер как

photoAppModule.controller('listCtrl', function($scope){ 
    $scope.photos = photos; 

});

Если фотографии переменная недоступна, то вы, возможно, придется создать службу с переменной и ввести в контроллер.

источник

2013-05-05 23:05:33 Ketan

Я добавил вид .. посмотри мое редактирование. Я просто свяжу $ scope.photos = фотографии; Но если я редактирую фотографии ... вид не изменяется – StefanoCudini

Я подозреваю, что вы не зарегистрировали контроллеры с угловым. photoAppModule.контроллер ('listCtrl', функция ($ scope) {}); вместо обычной функции. Это может сработать. – Ketan

возможно :), но я не понимаю, как зарегистрировать контроллер – StefanoCudini

Я думаю, что вы лучше использовать высокоуровневые угловые услуги для передачи данных, а также смотреть на обещания и услуги:

http://docs.angularjs.org/api/ng.$q

источник

2013-05-05 23:41:06

tnk! просмотреть мое редактирование, пожалуйста, первое решение «Что вы думаете? – StefanoCudini

выглядит нормально, это работает в вашем случае? –

да работа, но я не знаю, является ли это лучшим решением, которое обычно используется в angularjs. , пожалуйста, посмотрите мой EDIT 2, это второе решение, которое использует сервис, я просто хотел бы знать, хорошо ли он работает в этом режиме. который, по вашему мнению, самый изящный из двух? спасибо! – StefanoCudini

использование широковещательного

//service 
var mydata = []; 
this.update = function(){ 
    $http.get(url).success(function(data){ 
    mydata = data; 
    broadcastMe(); 
    }); 
}; 
this.broadcastMe = function(){ 
    $rootScope.$broadcast('mybroadcast'); 
}; 

//controller 
$scope.$on('mybroadcast', function(){ 
    $scope.mydata = service.mydata; 
};

http://bresleveloper.blogspot.co.il/

EDIT: пару дней назад я научился лучшей практике http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial.html

источник

2013-08-16 14:47:32 bresleveloper

Короткий ответ:

.controller('listCtrl', ['$scope', '$timeout', function($scope, $timeout) { 
    $timeout(function() { 
     $scope.photos = photos; 
    }, 0); 
}]);

Длинный ответ: Пожалуйста, не путайте регулярные яваскрипт и угловатый, как это. Перезапишите свой код, чтобы угловые знали, что происходит в любое время.

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 
     }); 
}]);

источник

2014-08-26 01:16:19

Обновление AngularJS Просмотр после загрузки модели с Ajax

ответ

Смежные вопросы