Question

我有这两项服务：

.factory('HttpHandler', function() {       
    return {
        loadData: function (promise) {
            var self = {
                data: [],
                loading: true,
                promise: promise
            };

            promise.then(function (data) {
                self.data = data;
                self.loading = false;
            });

            promise.finally(function () {
                self.loading = false;
            });

            return self;
        }
    };
})

.factory('Order', ['$resource', '$filter', 'apiUrl', function ($resource, $filter, api) {
    var Order = $resource(api + 'orders/:path', {
        path: '@path'
    }, {
        recent: {
            method: 'GET',
            params: {
                path: 'recent'
            },
            isArray: true
        }
    }, {
        failures: {
            method: 'GET',
            params: {
                path: 'failures'
            },
            isArray: true
        }
    }, {
        exceptions: {
            method: 'GET',
            params: {
                path: 'exceptions'
            },
            isArray: true
        }
    });

    angular.extend(Order.prototype, {
        getDescription: function () {
            var rolls = 0,
                cuts = 0,
                skus = [],
                lines = $filter('orderBy')(this.lines, 'sku');

            for (var i = 0; i < lines.length; i++) {
                var line = lines[i];

                switch (line.type) {
                    case 0: // cut
                        cuts++;
                        break;
                    case 1: // roll
                        rolls++
                        break;
                }

                if (skus.indexOf(line.sku) == -1) {
                    skus.push(line.sku);
                }
            }

            var description = '';
            description += cuts > 0 ? cuts > 1 ? cuts + ' x cuts' : cuts + ' x cut' : '';
            description += rolls > 0 && description.length > 0 ? ', ' : '';
            description += rolls > 0 ? rolls > 1 ? rolls + ' x rolls' : rolls + ' x roll' : '';
            description += skus.length == 1 ? ' of ' + skus[0] : '';
            return description;
        }
    });

    return Order;
}]);

如您所见，我已定义了3种不同的路径：

订单/最近
订单/失败
订单/异常

我有这个控制器：

.controller('CustomerServicesController', ['HttpHandler', 'Order', function (handler, Order) {
    var self = this;

    self.recent = handler.loadData(Order.recent({ limit: 30 }).$promise);
    self.failures = handler.loadData(Order.failures({ limit: 30 }).$promise);
    self.exceptions = handler.loadData(Order.exceptions({ limit: 30 }).$promise);
}])

当我运行我的应用程序时，我收到一条错误说明：

undefined不是函数

在 self.failures = handler.loadData（Order.failures（{limit：30}）。$ promise）; 的行上。如果我注释掉2行，那么控制器就变成了：

.controller('CustomerServicesController', ['HttpHandler', 'Order', function (handler, Order) {
    var self = this;

    self.recent = handler.loadData(Order.recent({ limit: 30 }).$promise);
    //self.failures = handler.loadData(Order.failures({ limit: 30 }).$promise);
    //self.exceptions = handler.loadData(Order.exceptions({ limit: 30 }).$promise);
}])

一切正常...... 我认为它与 $ resource 有关，但我无法弄明白。为了完整起见，这是模板文件：

<div class="row">
    <a class="back" href="/"><i class="fa fa-arrow-circle-left"></i></a>

     <section class="large-4 columns">
         <h1 class="column-title">Orders <small>quick search</small></h1>

         <form name="orderFrom" role="form" ng-submit="customerServices.orderSearch()">
             <div class="row collapse">
                 <div class="small-10 columns typeahead-icon">
                     <input type="text" ng-model="customerServices.searchTerm" placeholder="Search" typeahead="item for items in customerServices.autoComplete() | filter:$viewValue" typeahead-loading="customerServices.loading" typeahead-min-length="2">
                     <i ng-show="customerServices.loading" class="fa fa-spinner fa-spin"></i>
                 </div>
                 <div class="small-2 columns">
                     <button type="submit" class="button postfix">Go</button>
                 </div>
             </div>
         </form>
     </section>

     <section class="tile-column large-8 columns" tile-column>
         <h1 class="column-title">Recent orders</h1>

         <div class="loading" ajax-loader ng-show="customerServices.recent.loading"></div>

         <div class="alert alert-box" ng-show="!customerServices.recent.loading && customerServices.recent.data.length === 0">
             No records have been found that match your search.
             <a href="#" class="close">&times;</a>
         </div>

         <a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.recent.data" id="{{order.orderNumber}}">
            <div class="text">
                <strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
                <span ng-bind="order.raisedBy"></span><br />
                <span ng-bind="order.orderNumber"></span><br />
                <span ng-bind="order.getDescription()"></span><br />
            </div>
        </a>
     </section>

     <section class="tile-column large-8 columns" tile-column>
         <h1 class="column-title">Sync failures</h1>

         <div class="loading" ajax-loader ng-show="customerServices.failures.loading"></div>

         <div class="alert alert-box" ng-show="!customerServices.failures.loading && customerServices.failures.data.length === 0">
             No records have been found that match your search.
             <a href="#" class="close">&times;</a>
         </div>

         <a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.failures.data" id="{{order.orderNumber}}">
             <div class="text">
                 <strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
                 <span ng-bind="order.raisedBy"></span><br />
                 <span ng-bind="order.orderNumber"></span><br />
                 <span ng-bind="order.getDescription()"></span><br />
             </div>
         </a>
     </section>

     <section class="tile-column large-8 columns" tile-column>
         <h1 class="column-title">Exceptions</h1>

         <div class="loading" ajax-loader ng-show="customerServices.exceptions.loading"></div>

         <div class="alert alert-box" ng-show="!customerServices.exceptions.loading && customerServices.exceptions.data.length === 0">
             No records have been found that match your search.
             <a href="#" class="close">&times;</a>
         </div>

         <a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.exceptions.data" id="{{order.orderNumber}}">
             <div class="text">
                 <strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
                 <span ng-bind="order.raisedBy"></span><br />
                 <span ng-bind="order.orderNumber"></span><br />
                 <span ng-bind="order.getDescription()"></span><br />
             </div>
         </a>
     </section>
</div>

谁能告诉我为什么这不起作用？

Answer 1

想出来，我在订单服务中出现语法错误。它应该是：

var Order = $resource(api + 'orders/:path', {
    path: '@path'
}, {
    recent: {
        method: 'GET',
        params: {
            path: 'recent'
        },
        isArray: true
    },
    failures: {
        method: 'GET',
        params: {
            path: 'failures'
        },
        isArray: true
    },
    exceptions: {
        method: 'GET',
        params: {
            path: 'exceptions'
        },
        isArray: true
    }
});

而不是

var Order = $resource(api + 'orders/:path', {
    path: '@path'
}, {
    recent: {
        method: 'GET',
        params: {
            path: 'recent'
        },
        isArray: true
    }
}, {
    failures: {
        method: 'GET',
        params: {
            path: 'failures'
        },
        isArray: true
    }
}, {
    exceptions: {
        method: 'GET',
        params: {
            path: 'exceptions'
        },
        isArray: true
    }
});

细微差别：）

AngularJS $资源自定义网址无法正常工作

1 个答案: