AngularJS更新功能不起作用

本文介绍了AngularJS更新功能不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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