javascript - $httpProvider 与 ngResource 冲突

Question

我正在使用 AngularJS v1.3.15。

这是我的 app.js

'use strict'

var userApp = angular.module('userApp', [
  'userServices',
  'ngRoute',
  'LocalStorageModule',
  'userCtrls',
  'userDirectives',
  'angular-ladda'
]);

userApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/users', {
        templateUrl: 'partials/search.html',
        controller: 'userCtrl'
      }).
      when('/login', {
        templateUrl: 'partials/login.html',
        controller: 'loginCtrl'
      }).
      otherwise({
        redirectTo: '/users'
      });
  }]);

userApp.config(["$httpProvider", function ($httpProvider) {
  $httpProvider.defaults.transformResponse.push(function(responseData){
    convertDateStringsToDates(responseData);
    return responseData;
  });
}]);


var regexIso8601 = /^(\d{4}|\+\d{6})(?:-(\d{2})(?:-(\d{2})(?:T(\d{2}):(\d{2}):(\d{2})\.(\d{1,})(Z|([\-+])(\d{2}):(\d{2}))?)?)?)?$/;

function convertDateStringsToDates(input) {
  // Ignore things that aren't objects.
  if (typeof input !== "object") return input;

  for (var key in input) {
    if (!input.hasOwnProperty(key)) continue;

    var value = input[key];
    var match;
    // Check for string properties which look like dates.
    if (typeof value === "string" && (match = value.match(regexIso8601))) {
      var milliseconds = Date.parse(match[0])
      if (!isNaN(milliseconds)) {
        input[key] = new Date(milliseconds);
      }
    } else if (typeof value === "object") {
        // Recurse into object
      convertDateStringsToDates(value);
    }
  }
}

服务.js

'use strict';

/* Services */
var userServices = angular.module('userServices', ['ngResource']);

userServices.factory('User', ['$resource',
  function ($resource) {
    return $resource('user/:studentNumber', {
      studentNumber: '@studentNumber'
    }, {
      query: {
        method: 'GET',
        isArray: true
      },
      update: {
        method: 'PUT',
        params: {
          validUntil: '@validUntil'
        }
      }
    });
  }]);

Controller .js

'use strict';

/* Controllers */

var userCtrls = angular.module('userCtrls', []);

userCtrls.controller('userCtrl', ['$scope', '$location', 'User', '$http', 'localStorageService', function ($scope, $location, User, $http, localStorageService) {


  $scope.users = User.query(function (users) {
    // when I breakpoint in here, users are a proper array and all dates are Date objects. everything seems fine.
  }, function () {
    //failure
    $location.path('/login');
  });

}]);

运行应用程序后，我在控制台中收到此错误

TypeError: get is not a function
    at Array.<anonymous> (http://localhost:1337/js/bower-components/angular/angular.js:17717:24)
    at comparator (http://localhost:1337/js/bower-components/angular/angular.js:17724:36)
    at Array.sort (native)
    at http://localhost:1337/js/bower-components/angular/angular.js:17720:30
    at $parseFilter (http://localhost:1337/js/bower-components/angular/angular.js:12214:19)
    at ngRepeatDirective.compile.trackByIdExpFn (http://localhost:1337/js/bower-components/angular/angular.js:24561:20)
    at ngRepeatAction (http://localhost:1337/js/bower-components/angular/angular.js:24619:25)
    at Object.$watchCollectionAction [as fn] (http://localhost:1337/js/bower-components/angular/angular.js:14175:13)
    at Scope.$get.Scope.$digest (http://localhost:1337/js/bower-components/angular/angular.js:14308:29)
    at Scope.$get.Scope.$apply (http://localhost:1337/js/bower-components/angular/angular.js:14571:24)(anonymous function) @ angular.js:11655$get @ angular.js:8596$get.Scope.$digest @ angular.js:14326$get.Scope.$apply @ angular.js:14571done @ angular.js:9698completeRequest @ angular.js:9888requestLoaded @ angular.js:9829
sails.io.js:143 

当我评论这一行时它消失了

convertDateStringsToDates(responseData);

该函数的目的是将表示日期的字符串转换为 Date 对象，否则 angular 不会接受它们作为 <input type="date"> 的 ng-model

这是我使用 $scope.users 变量的 html 代码

  <div class="row" ng-repeat="user in users | filter:query track by user.studentnumber | orderBy:-user.validUntil" style="margin-bottom: 0.5em">
    <div class="col-sm-2">
      <img
        ng-src={{user.photo}}
        class="img-thumbnail"/>
    </div>
    <div class='col-sm-10'>
      <div class="form-group">
        <h3>{{user.name}}</h3>
        <span ng-if="!user.isValid" class="label label-danger">Inactive</span>
        <span ng-if="user.isValid" class="label label-success">Active</span>
        <h4>{{user.studentNumber}}</h4>


        <radio-button-group class="btn-group " data-toggle="buttons-radio" user="user" options="['admin','trainer','user']"></radio-button-group>
        <input type="date" ng-model="user.validUntil" ng-change="setValidUntil(user)" class="form-control" placeholder="not specified"/>
        <span ng-if="user.updatedBy">User was last updated by the admin <b>{{user.updatedBy}}</b></span>

      </div>
    </div>
  </div>

Answer 1

将 orderBy 表达式放在引号中! orderBy:'-user.validUntil'