AngularJs $scope 在对工厂发出 GET 请求后不会更新 [英] AngularJs $scope doesn't update after a GET request on a factory

问题描述

我一直在为一个实验项目尝试 AngularJS，但我遇到了这个问题.在我的 html 中，我想显示一个项目列表

Index.html

一些列表
<div ng-controller="datlist"><div ng-repeat="项目中的项目"><div>物品描述:{{item.description}}</div><div>项目名称:{{item.name}}</div>

起初我使用一个简单的控制器来获取信息并使用这个来更新视图:

controllers.js(原版)

function datlist($scope,$http){$http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).成功(功能(数据，状态，标题，配置){$scope.items=data.itemsToReturn;控制台日志(数据)；}).错误(功能(数据，状态，标题，配置){console.log("失败");});}

这运行得很好，我可以得到项目列表.同时，通过更改我的结构以使用工厂来发出相同的请求并将其绑定到 $scope.items 它不起作用.我尝试了很多 $watch 的变体，但我无法让它更新 $scope.items.我发现了一些关于 $apply 的东西，但我真的不明白如何使用它.

controllers.js(新的)

var datModule = angular.module('datModule',[]);datModule.controller('datlist', function ($scope, datfactory){$scope.items = datfactory.getlist();$scope.$watch($scope.items, $scope.items = datfactory.getlist());});datModule.factory('datfactory', 函数 ($http){var 工厂 = {};factory.getlist = function(){$http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).成功(功能(数据，状态，标题，配置){console.log(data.itemsToReturn);//我得到了正确的项目，这里一切正常返回 data.itemsToReturn;}).错误(功能(数据，状态，标题，配置){console.log("失败");});}返厂；});

对此的任何想法都会很棒.PS:我发现很多帖子都在讨论这个问题，但没有一个能帮我找到完整的解决方案.

谢谢

解决方案

使用手表有点难看.

试试这个:

datModule.factory('datfactory', function ($http, $q){this.getlist = function(){return $http.get('http://localhost:61686/getdatlist?format=json',{'Access-Control-Allow-Origin': 'localhost:*'}).then(功能(响应){控制台日志(响应)；//我得到了正确的项目，这里一切正常返回 response.data.itemsToReturn;});}返回这个；});datModule.controller('datlist', function ($scope, datfactory){数据工厂.getlist().then(function(arrItems){$scope.items = arrItems;});});

这就是你如何使用 Promise 来处理异步事务.

更新 (15.01.2015):现在更时尚！

I have been trying AngularJS for a experimental project and I came along with this problem. In my html I want to display a list of items

Index.html

<h1>Some list</h1>
<div ng-controller="datlist">
    <div ng-repeat="item in items">
        <div>Item description: {{item.description}}</div>
        <div>Item name: {{item.name}}</div>
    </div>
</div>

At first I was using a simple controller to get the information and update the view just using this:

controllers.js (original)

function datlist($scope,$http){
$http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).
    success(function(data, status, headers, config) {
        $scope.items=data.itemsToReturn;
        console.log(data);
}).
error(function(data, status, headers, config) {
    console.log("fail");
});

}

This was working pretty well and I could get the list of items. Whilst, by changing my structure to use a factory to make the same request and bind it to $scope.items it doesn't work. I tried a lot of variations of $watch but I couldn't get it to update $scope.items. I found something about $apply but I really can't understand how to use it.

controllers.js (new one)

var datModule = angular.module('datModule',[]);
datModule.controller('datlist', function ($scope, datfactory){
    $scope.items = datfactory.getlist();
    $scope.$watch($scope.items, $scope.items = datfactory.getlist());
});
datModule.factory('datfactory', function ($http){
    var factory = {};
    factory.getlist = function(){
        $http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).
        success(function(data, status, headers, config) {
            console.log(data.itemsToReturn); //I get the correct items, all seems ok here
            return data.itemsToReturn;
        }).
        error(function(data, status, headers, config) {
            console.log("fail");
        });

    }
    return factory;
});

Any ideas about this will be great. PS: I found a lot of posts talking about this issue but none of them helped me to get a full solution.

Thanks

解决方案

Using a watch for that is kinda ugly.

try this:

datModule.factory('datfactory', function ($http, $q){

    this.getlist = function(){            
        return $http.get('http://localhost:61686/getdatlist?format=json',{'Access-Control-Allow-Origin': 'localhost:*'})
            .then(function(response) {
              console.log(response); //I get the correct items, all seems ok here
              return response.data.itemsToReturn;
            });            
    }
    return this;
});

datModule.controller('datlist', function ($scope, datfactory){
    datfactory.getlist()
      .then(function(arrItems){
         $scope.items = arrItems;
       });
});

This is how you use promises for async matter.

UPDATE (15.01.2015): Now even sleeker!

这篇关于AngularJs $scope 在对工厂发出 GET 请求后不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！