web-dev-qa-db-fra.com

AngularJS update View après que le modèle a été chargé depuis Ajax

Je suis débutant dans angularjs en développement et j'ai écrit cette application simple, mais je ne comprends pas comment je peux mettre à jour la vue, une fois le modèle chargé depuis la demande d'ajax au démarrage!

Ce code ne fonctionne pas lorsque j'ajoute un délai dans photos.php, en utilisant: Sleep (3); Pour simuler le délai du serveur distant! au lieu de cela si search.php est rapide ça marche !!

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

sortie de 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, Solution différée: 

.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, solution de service: 

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

La réponse courte est la suivante:

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

La réponse longue est: Veuillez ne pas mélanger du javascript classique et angulaire comme celui-ci. Réécrivez votre code afin qu'angular sache ce qui se passe à tout moment.

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

utiliser la diffusion

//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: il y a quelques jours, j'ai appris la meilleure pratique http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial.html

4
bresleveloper

Je pense que vous feriez mieux d'utiliser des services angulaires de haut niveau pour le transfert de données, ainsi que dans les promesses et les services:

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

1
Andrew Douglas

Vous devez lier un élément de votre vue à une propriété (simple ou objet) de votre objet $scope. Une fois que l'objet $ scope est mis à jour, la vue doit être mise à jour seule. C'est la beauté de AngularJS.

EDIT: Veuillez enregistrer votre contrôleur comme 

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

});

Si la variable photos n'est pas disponible, vous devrez peut-être créer un service avec la variable et injecter dans le contrôleur.

0
Ketan