javascript – AngularJS更新功能(仍)无法正常工作

我有一个更新对象的函数,问题是当我从更新表单字段返回详细视图时,它初始化旧对象而不是更新对象.

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

这是我的carService：

 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控制器：

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控制器：

  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) {
    });
   }
   }]);

我的carView在使用$location.path(‘/ car / view /’carId)重定向时再次初始化对象;但作为原始对象而不是更新的对象.

我正在尝试在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, {}];
     });

谢谢你的帮助！

解决方法:

看起来你的更新函数调用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"}

来源：https://www./content-1-491001.html