10

我是 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>

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

编辑 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();
})
...
4

4 回答 4

6

简短的回答是这样的：

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

长答案是：请不要像这样混合常规的 javascript 和 angular。重新编写您的代码，以便 Angular 始终知道发生了什么。

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-26T01:16:19.557 回答
4

使用广播

//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-16T14:47:32.203 回答
1

我认为您最好使用高级角度服务进行数据传输，同时查看承诺和服务：

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

于 2013-05-05T23:41:06.160 回答
0

您需要将视图中的元素绑定到对象的属性（简单或对象）$scope。更新 $scope 对象后，视图应自行更新。这就是 AngularJS 的美妙之处。

编辑：请将您的控制器注册为

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

});

如果照片变量不可用，那么您可能必须使用该变量创建服务并注入控制器。

于 2013-05-05T23:05:33.777 回答