javascript - AngularJS 更新功能(仍然)不起作用

Question

我有一个更新对象的函数，问题是当我从更新表单字段返回到详细 View 时，它初始化旧对象而不是更新后的对象。

我想在 CarService 而不是 app.js 中填充汽车列表

这是我的汽车服务:

 window.app.service('CarService', ['HTTPService', '$q',       
'$http', function (HTTPService, $q, $http) {
 'use strict';


this.cars = [];
this.get = function () {
var deferred = $q.defer();

HTTPService.get('/car').then(function resolve(response) {
    deferred.resolve(response.data);
}, function reject(response){

    deferred.reject(response);      
});
};

this.add = function (formCar) {

var deferred = $q.defer();

console.log("CarService response 1 : ");
$http.post('/#/car', formCar).then(function resolve(response){

    deferred.resolve(response.data);
}, function reject(response){
    deferred.reject(response);      
});
return deferred.promise;
};

this.showDetails = function (carId){
var deferred = $q.defer();

$http.get('/car/view/{{carId}}').then(function resolve(response){
    HTTPService.get('/car/view/' + carId).then(function 
resolve(response) {

    deferred.resolve(response.data);

}, function reject(response){
    deferred.reject(response);      
});
return deferred.promise;

};

this.put = function (carformUpdate, opleidingsprofielId) {
var deferred = $q.defer();

$http.put('/#/car/:carId/update', carformUpdate).then(function resolve(response){
    deferred.resolve(response.data);
}, function reject(response){
    deferred.reject(response);      
});
return deferred.promise;
 };

}]);

这是我的 updateCar Controller :

window.app.controller('updateCarCtrl', ['$scope', '$routeParams', 
'CarService', '$location', function ($scope, $routeParams, CarService, 
$location) {
'use strict';
$scope.carId = $routeParams.carId;
initCar($scope.carId);


function initCar(carId) {
        CarService.showDetails(carId).then(function success(car) {
            $scope.car = car;

        }, function error(response) {
        });
    }

    $scope.updateCar = function (carId) {
        carId = $scope.carId;

        if($scope.car !== null){
            CarService.put($scope.car, carId).then(function 
  success(response) {
            $scope.car = response;
            $location.path('/car/view/' + carId);
            alert("Car updated");

        }, function error(response) {
            $scope.error = response.statusText;
            $scope.myform = {};
        });
        }


    };

   }]);

这是我的 carView Controller :

  window.app.controller('carViewCtrl', ['$scope', '$routeParams',    '$location', 
 'CarService', function ($scope, $routeParams, $location, CarService) {
 'use strict';

 $scope.carId = $routeParams.carId;
 initCar($scope.carId);

 function initCar(carId) {
  CarService.showDetails(carId).then(function success(car) {  

   $scope.car = car;            
        }, function error(response) {
    });
   }
   }]);

当使用 $location.path('/car/view/' + carId); 重定向时，我的 carView 会再次初始化该对象；但作为原始对象而不是更新后的对象。

我正在尝试在 ngMock 后端上执行此操作。

我的 app.js 看起来像这样:

App.js

路由:

.when('/car', {
    templateUrl: 'pages/car/car.html'

})
.when('/car/view/:carId', {
    templateUrl: 'pages/car/carView.html',
    controller: 'carViewCtrl',
    controllerAs: 'ctrl'
})
.when('/car/addCar', {
    templateUrl: 'pages/car/carAdd.html'
})
.when('/car/:carId/update', {
    templateUrl: 'pages/car/carUpdate.html',
    controller: 'updateCarCtrl',
    conrtollerAs: 'ctrl'
})

app.run:这是定义我的模拟后端的地方

  window.app.run(function($httpBackend) {
  var cars = [
  {
  id: 0, 
  name: ‘car0’, 
  address: 'adress0', 
  tel: 'tel0', 
  email: 'email0'}, 
  {
  id: 1, 
  name: ‘car1’, 
  address: 'adress1', 
  tel: 'tel1', 
  email: 'email1'
  }];

  var carUrl = “/#/car”;

  $httpBackend.whenGET(carUrl).respond(function(method,url,data) {
   return [200, cars, {}];
   });

   $httpBackend.whenGET(/\/#\/car\/view\/(\d+)/, undefined, 
   ['carId']).respond(function(method, url, data, headers, params) {

    return [200, cars[Number(params.carId)], {
    carId : params.carId
    }];
    });

      $httpBackend.whenPUT('/#/car/:carId/update').respond(function(method,     url, 
 data, carId) {
 var car = angular.fromJson(data);
 return [200, car, {}];
     });

感谢您的帮助!

Answer 1

看起来您的更新函数调用了 CarService.put，后者又调用了 HTTPService.put。在你的模拟后端中你有这个:

$httpBackend.whenPUT
    -> add new car;

所以它总是添加一辆新车，而不更新一辆。这意味着当您执行 get 操作时，您可能会得到与给定 id 匹配的第一辆汽车，但它不是更新的汽车。

伪代码:

// carService.cars = [{id:1,name:"name"}]
var myCar = carService.get(1); // returns {id:1,name:"name"}
myCar.name = "otherName";
carService.put(car); // -> cars.push(car); -> cars = [{id:1,name:"name"},{id:1,name:"otherName"}]

goToDetails(1);

var myCar = carService.get(1); // iterate over the cars, and return the one with id = 1,
// which is {id:1,name:"name"}