使用 restangular 扩展 HotTowel Dataservice 以使用 REST 的问题

Question

我第一次使用 Angular 和 Hottowel，我想扩展数据服务以利用 restangular 的功能将 REST 数据提供到 hottowel 应用程序的其余部分。

我已经包含了restangular，并让它成功获取了REST。

我意识到 restangular 文档讨论了直接在控制器中使用承诺，所以我现在想知道将它包含在数据服务中是否可行。

有问题的函数是 getJobs。 它是唯一使用restangular的函数。 它在 dataservice 中定义为一个函数，并添加到 dataservice 变量中以公开它。 它在仪表板控制器中具有匹配功能。 它还添加到仪表板控制器中的承诺列表中。 我已经确认该函数返回 restangular 函数中的对象列表。 即使 promise 执行 then 子句，我在仪表板控制器中什么也得不到。

非常感谢任何指导。

谢谢

西蒙

代码如下：-

dataservice.js

(function () {
'use strict';

angular
    .module('app.core')
    .factory('dataservice',dataservice);

dataservice.$inject = ['$q','Restangular'];
/* @ngInject */
function dataservice($q,Restangular) {
    var service = {
        getPeople: getPeople,
        getMessageCount: getMessageCountXXX,
        getJobs: getJobs
    };

    return service;



    function getJobs() {
        var jobs = [];
        var baseJobs = Restangular.all('jobs');

        baseJobs.getList().then(function(jobs) {
            console.log("Within dataservice.getJobs");
            console.log(jobs);

        });
        return $q.when(jobs);
        console.log("EndofgetJobspost return shouldnt get here");       
    }


    function getMessageCountXXX() { return $q.when(72); }

    function getPeople() {
        var people = [
            {firstName: 'John', lastName: 'Papa', age: 25, location: 'Florida'},
            {firstName: 'Ward', lastName: 'Bell', age: 31, location: 'California'},
            {firstName: 'Colleen', lastName: 'Jones', age: 21, location: 'New York'},
            {firstName: 'Madelyn', lastName: 'Green', age: 18, location: 'North Dakota'},
            {firstName: 'Ella', lastName: 'Jobs', age: 18, location: 'South Dakota'},
            {firstName: 'Landon', lastName: 'Gates', age: 11, location: 'South Carolina'},
            {firstName: 'Haley', lastName: 'Guthrie', age: 35, location: 'Wyoming'}
        ];
        return $q.when(people);
    }
}   
})();

dashboard.Controller.js

(function () {
'use strict';

angular
    .module('app.dashboard')
    .controller('DashboardController', DashboardController);

DashboardController.$inject = ['$q', 'dataservice', 'logger'];
/* @ngInject */
function DashboardController($q, dataservice, logger, api) {
    var vm = this;
    vm.news = {
        title: 'helloWorld',
        description: 'Hot Towel Angular is a SPA template for Angular developers.'
    };
    vm.messageCount = 0;
    vm.people = [];
    vm.jobs = [];
    vm.title = 'Dashboard';


    activate();

    function activate() {
        var promises = [getMessageCount(), getPeople(), getJobs() ];
        return $q.all(promises).then(function() {
            logger.info('Activated Dashboard View');
        });
    }

    function getMessageCount() {
        return dataservice.getMessageCount().then(function (data) {
            vm.messageCount = data;
            return vm.messageCount;
        });
    }

    function getPeople() {
        return dataservice.getPeople().then(function (data) {
            vm.people = data;
            return vm.people;
        });
    }

    function getJobs() {
        console.log("Within getJobs");
        return dataservice.getJobs().then(function (data) {
            vm.jobs = data;
            console.log(data);
            return vm.jobs;
        }, function (reason){
            console.log(reason);
        });
    }
}



})();

dashboard.html的相关部分：-

 <div class="row">
            <div class="col-md-6">
                <div class="widget wviolet">
                    <div ht-widget-header title="Jobs"
                         allow-collapse="true"></div>
                    <div class="widget-content text-center text-info">
                        <table class="table table-condensed table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Category</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="p in vm.jobs">
                                    <td>{{p.name}}</td>
                                    <td>{{p.description}}</td>
                                    <td>{{p.status}}</td>
                                    <td>{{p.category}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="widget-foot">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>    

Answer 1

问题是，在您的数据服务 getJobs() 函数中，您没有返回来自 ajax 调用的作业列表。使用以下代码更改该功能。

function getJobs() {

        var baseJobs = Restangular.all('jobs');

        return baseJobs.getList().then(function(jobs) {
            console.log("Within dataservice.getJobs");
            console.log(jobs);
            return jobs;

        });
    }