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

时间:2015-01-05 02:51:56

标签: angularjs restangular hottowel

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

我已经包含了restangular并让它成功地获得了REST。

我意识到restangular文档讨论直接在控制器中使用promise,所以我现在想知道将它包含在dataservice中是否可行。

有问题的功能是getJobs。 它是唯一使用restangular的函数。 它在dataservice中定义为一个函数,并且还添加到dataservice变量中以公开它。 它在仪表板控制器中具有匹配功能。 它还添加到仪表板控制器中的promise列表中。 我已确认该函数返回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>    

1 个答案:

答案 0 :(得分:1)

问题是,在您的dataservice 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;

        });
    }