在angularjs承诺不工作 [英] Promises in angularjs don't work

问题描述

我有一个工厂，从我的后端获取数据：

  as.factory（abbdata功能GetAbbData（$ HTTP，$ rootScope，$ routeParams，$ Q）{// $ Q =承诺
            变种递延= $ q.defer（）;
            VAR数据= [];
            变种abbdata = {};            abbdata.async =功能（）{
                $ http.get（$ rootScope.appUrl +'/ NAO /汇总/'+ $ routeParams ['身份证']）。成功（功能（D）{
                数据= d.abbData;
                deffered.resolve（）;
            }）;            返回deffered.promise;
        };        abbdata.data =功能（）{
            返回的数据;
        };        返回abbdata;
        }）;
 

一个叫我厂这样在我的控制器：

  abbdata.async（）。然后（函数（）{
        $ scope.abbData = abbdata.data（）; //包含数据
    }）;
 

当我做了的console.log（$ scope.abbData）我的服务外呼，下面正好，结果是undifined。为什么？不应该在 $ scope.abbData 从我的服务包含的数据后，我打电话吗？

编辑：

解决方案

如果您的console.log（$ scope.abbData）之外的服务调用它应该显示未定义，因为调用是异步的。

  abbdata.async（）。然后（函数（）{
    $ scope.abbData = abbdata.data（）; //包含数据
}）;
的console.log（$ scope.abbData）//这应该显示未定义
 

的的console.log（$ scope.abbData）只设置了abbData应显示数据后，

  abbdata.async（）。然后（函数（）{
    $ scope.abbData = abbdata.data（）; //包含数据
    的console.log（$ scope.abbData）//这应该显示数据
}）;
 

修改

您可以使用abbData从服务调用例如像

  angular.module（'对myApp'，[]）。控制器（'HomeCtrl'，函数（$范围，abbdata）{
    VAR的updateUI;
    $ scope.abbData = [];    abbdata.async（）。然后（函数（）{
        $ scope.abbData = abbdata.data（）; //包含数据
        的updateUI（）;
    }）;
    的updateUI =功能（）{
        //使用$ scope.abbData东西
    }
}）;
 

编辑2

在响应查询，我会做这样的事情，

  angular.module（'对myApp'，[]）
.controller（'JobsCtrl'，函数（$范围，$ jobService）{
    $ scope.jobs = [];
    $ jobService.all（）。然后（功能（工种）{
        $ scope.jobs =工作;
    }）;
}）
。服务（'$ jobService'，函数（$ Q $ HTTP）{
    返回{
        所有：功能（）{
            变种推迟= $ q.defer（）;
            $ HTTP（{
                网址：HTTP：// URL'，
                方法：GET
            }）。成功（功能（数据）{
                deferred.resolve（数据）;
            }）错误（函数（）{
                deferred.reject（连接问题）;
            }）;
            返回deferred.promise;
        }
    }
}）;
 

相关视图

 ＆LT;机身NG-应用=对myApp＆GT;
    ＆LT; D​​IV NG控制器=JobsCtrl＆GT;
        ＆LT; D​​IV NG重复=作业的作业跟踪由job.id＆GT;
            ＆LT; A HREF =＃/标签/职位/ {{job.id}}级=项项图标向右＆GT;
                ＆LT; H2＆GT; {{job.job_name}}＆LT; / H＆GT;
                ＆LT; P＆GT;截止日期：{{job.job_due_date}}＆LT; / P＆GT;
            ＆所述; / A＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; D​​IV＆GT;
＆LT; /身体GT;
 

1. 在这里服务的，它返回一个承诺的所有功能，即它会当数据被取出通知。


2. 控制器中的服务被称为并且一旦该服务呼叫解决$ scope.jobs被解析数据分配。


3. 的$ scope.jobs在角度视图中使用。一旦就业数据都解决了，即$ scope.jobs分配，视图更新。

希望这有助于

I have an factory that gets data from my backend:

as.factory("abbdata", function GetAbbData($http,$rootScope,$routeParams,$q) {   //$q = promise
            var deffered = $q.defer();
            var data = [];
            var abbdata = {};

            abbdata.async = function () {
                $http.get($rootScope.appUrl + '/nao/summary/' + $routeParams['id']).success(function(d) {
                data = d.abbData;
                deffered.resolve();
            });

            return deffered.promise;
        };

        abbdata.data = function() {
            return data;
        };

        return abbdata;
        });

A call my factory like this in my controller:

abbdata.async().then(function() {
        $scope.abbData = abbdata.data(); //Contains data
    });

When I do a console.log($scope.abbData) outside my service call, just underneath, the result Is undifined. Why? Should not the $scope.abbData contain the data from my service after I call it?

EDIT:

解决方案

if you console.log($scope.abbData) outside the service call it should show undefined, since the call is asynchronous.

abbdata.async().then(function() {
    $scope.abbData = abbdata.data(); //Contains data
});
console.log($scope.abbData) // this should show undefined

The console.log($scope.abbData) just after setting the abbData should show the data

abbdata.async().then(function() {
    $scope.abbData = abbdata.data(); //Contains data
    console.log($scope.abbData) // this should show the data
});

EDIT

you can use abbData from your service call like for example

angular.module('myApp', []).controller('HomeCtrl', function($scope, abbdata){
    var updateUI;    
    $scope.abbData = [];

    abbdata.async().then(function() {
        $scope.abbData = abbdata.data(); //Contains data
        updateUI();
    });
    updateUI = function(){
        //do something with $scope.abbData
    }
});

EDIT 2

On response to your query, I would do something like,

angular.module('myApp', [])
.controller('JobsCtrl', function($scope, $jobService) {
    $scope.jobs = [];
    $jobService.all().then(function(jobs) {
        $scope.jobs = jobs;
    });
})
.service('$jobService', function ($q, $http) {
    return {
        all: function () {
            var deferred = $q.defer();
            $http({
                url: 'http://url',
                method: "GET"
            }).success(function (data) {
                deferred.resolve(data);
            }).error(function () {
                deferred.reject("connection issue");
            });
            return deferred.promise;
        }
    }    
});

associated view

<body ng-app = "myApp">
    <div ng-controller = "JobsCtrl">
        <div ng-repeat="job in jobs track by job.id">
            <a href="#/tab/jobs/{{job.id}}" class="item item-icon-right">
                <h2>{{job.job_name}}</h2>
                <p>DUE DATE: {{job.job_due_date}}</p>
            </a>
        </div>
    <div>
</body>

1. Here the service an all function which returns a promise, i.e. it will notify when data is fetched.
2. in the controller the service is called and as soon the service call is resolved the $scope.jobs is assigned by the resolved data.
3. the $scope.jobs is used in the angular view. as soon as the jobs data are resolved, i.e. $scope.jobs is assigned, the view is updated.

hope this helps

这篇关于在angularjs承诺不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！