AngularJS更新功能不起作用 [英] AngularJS update function is (still)not working

问题描述

我有一个更新对象的功能，问题是当我从更新表单字段返回到详细视图时，它会初始化旧对象而不是已更新对象.

I have a function which updates the object, the problem is when I go back from the update form field to the detailed view, it initializes the old object instead of the updated object.

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

这是我的carService:

This is my 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控制器:

This is my 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控制器:

This is my 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再次初始化该对象.而是原始对象而不是更新对象.

My carView initializes the object again when it gets redirected with $location.path('/car/view/' + carId); but as the original object and not the updated object.

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

I'm trying to do this on an ngMock backend.

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

My app.js looks like this:

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:这是定义我的模拟后端的地方

app.run: this is where my mock backend is defined

  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.在嘲笑的后端中，您有以下内容:

It looks like your update function calls the CarService.put, which in turn calls a HTTPService.put. In your mocked backend you have this:

$httpBackend.whenPUT
    -> add new car;

因此，它总是添加一辆新车，而不更新一辆.这意味着当您进行获取时，您可能会获得与给定ID相匹配的第一辆汽车，这不是更新的ID.

So it always adds a new car, and doesn't update one. This means that when you do the get, you probably get the first car back that matches the given id, which isn't the updated one.

使用伪代码:

// 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"}

这篇关于AngularJS更新功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！