AngularJS更新從Ajax加載模型後查看

我是angularjs開發人員的新手，我寫了這個簡單的應用程序，但不明白我是如何更新視圖，在啓動後從ajax請求加載模型！AngularJS更新從Ajax加載模型後查看

當我向photos.php中添加延遲時，此代碼不起作用： sleep（3）;用於模擬遠程服務器延遲的！相反，如果search.php是快速的工作！

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

：

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

EDIT 1，推遲溶液的輸出

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的美麗。

編輯：請您在註冊控制器

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

});

如果照片變量不可用，那麼你可能需要創建與變量服務，並在控制器注入。

來源

2013-05-05 23:05:33 Ketan

我加了視圖..看我的編輯。我只是綁定$ scope.photos = photos; 但是，如果我編輯照片...視圖不會改變 – StefanoCudini 2013-05-05 23:10:16

我懷疑你沒有註冊與Angular的控制器。 photoAppModule。控制器（'listCtrl'，函數（$ scope）{}）; 而不只是一個常規功能。這可能會起作用。 – Ketan 2013-05-05 23:12:02

也許:)但我不明白如何註冊控制器 – StefanoCudini 2013-05-05 23:13:48

我覺得你最好的數據傳輸採用高層次的角度服務，還考慮承諾與服務：

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

來源

2013-05-05 23:41:06

tnk！查看我的編輯請'第一個解決方案'您怎麼看？ – StefanoCudini 2013-05-05 23:54:44

看起來不錯，它在你的情況下工作嗎？ – 2013-05-06 00:13:30

是的工作，但我不知道這是否是通常在angularjs中使用的最佳解決方案。請看看我的編輯2，是使用服務的第二個解決方案，我只想知道該服務在此模式下是否定義良好。你認爲哪兩個最優雅？謝謝！ – StefanoCudini 2013-05-06 15:42:03

使用廣播

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

編輯：幾天前我已經學會了最佳做法 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); 
}]);

長的答案是：請不要混淆常規的JavaScript和角度是這樣的。重新編寫代碼，以便角度始終知道發生了什麼。

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加載模型後查看

回答

相關問題