コントローラーには 2 つの関数があります。
showEditScreenユーザー レコードを実際にロードする関数 です$resource.get。updateUserDetailsユーザーを更新する関数。
showEditScreen関数ではすべてが機能しています。ユーザーの詳細は json を介して解析され、$scope.userオブジェクトを見ると$get、 、$post、などの関数$updateが存在します。
関数内の同じ (変更されていない) オブジェクトを見ると、オブジェクトが変更されており、、updateUserDetailsなどのすべての関数が欠落しています。$get$post$update
これは本当に奇妙な振る舞いです。誰かこれについて説明がありますか？
http.put を使用すると、ところでオブジェクトを保存できます。
console.log($scope.user) showEditScreen() 関数の出力
Resource {$get: function, $save: function, $query: function, $remove: function, $delete: function…}
firstName: "Mista"
id: "d419375a-ba0b-4177-93cf-842e2c3e046e"
lastName: "BlaaahBlaaah1"
password: "bla"
roles: Array[2]
username: "blabla1"
__proto__: Resource
updateUserDetails() 関数の console.log($scope.user):
Resource {id: "d419375a-ba0b-4177-93cf-842e2c3e046e", firstName: "Mista", lastName: "BlaaahBlaaah1", username: "blabla1", password: "bla"…}
firstName: "Mista"
id: "d419375a-ba0b-4177-93cf-842e2c3e046e"
lastName: "BlaaahBlaaah1"
password: "bla"
roles: Array[2]
username: "blabla1"
__proto__: Resource
updateUserDetails() 関数で $scope.user.$update() を実行する場合:
POST http://localhost:8080/api/user/.json 405 (Request method 'POST' not supported) angular.js:9120
(anonymous function) angular.js:9120
sendReq angular.js:8977
$http angular.js:8768
Resource.(anonymous function) angular-resource.js:385
Resource.(anonymous function) angular-resource.js:431
UserCtrl.$scope.updateUserDetails controllers.js:37
(anonymous function) angular.js:6212
(anonymous function) angular.js:12751
Scope.$eval angular.js:7905
Scope.$apply angular.js:7985
$delegate.__proto__.$apply index.html:500
(anonymous function) angular.js:12750
(anonymous function) angular.js:1928
forEach angular.js:110
eventHandler angular.js:1927
HTML:
<div id="user_list" class="listview_list">
<div id="user_row" class="listview_row" ng-repeat="user in users">
<div id="user_username" class="listview_column"><span class="listview_fat"> {{user.username}}</span></div>
<div id="user_firstname" class="listview_column">{{user.firstName}}</div>
<div id="user_lastname" class="listview_column">{{user.lastName}}</div>
<button class="listview_row_button" ng-click="showEditScreen(user.id)">Edit</button>
</div>
</div>
<div id="user_edit" class="edit_form" ng-show="userEditScreenIsVisible">
<form name="edit_user">
<label>Username</label><br/>
<input name="username" ng-model="user.username" required/><br/>
<label>Firstname</label><br/>
<input name="firstName" ng-model="user.firstName" required/><br/>
<label>Lastname</label><br/>
<input name="lastName" ng-model="user.lastName" required/><br/>
<button class="button" ng-click="hideEditScreen()">Close</button>
<button class="button" ng-click="updateUserDetails()">Update</button>
</form>
</div>
コントローラ：
/*
* Controller to display and manipulate users.
*/
function UserCtrl($scope, $http, Users, User) {
// set edit screen to invisible by default
$scope.userEditScreenIsVisible = false;
// set new screen to invisible by default
$scope.userNewScreenIsVisible = false;
// display list with users
Users.query(
{}, //params
function (data) { //success
$scope.users = data.data;
},
function (data) { //failure
console.log("Error occurred while getting list of users");
});
// show edit screen if edit button is clicked
$scope.showEditScreen = function(id) {
$scope.user = User.get({userId: id});
console.log($scope.user);
$scope.userEditScreenIsVisible = true;
}
// hide edit screen if close button is clicked
$scope.hideEditScreen = function() {
$scope.userEditScreenIsVisible = false;
}
$scope.updateUserDetails = function() {
console.log($scope.user);
$scope.user.$update();
//$http.put("http://localhost:8080/api/user/" + $scope.user.id + ".json", $scope.user);
}
// show new screen if add button is clicked
$scope.showNewScreen = function() {
$scope.userNewScreenIsVisible = true;
}
}
サービス：
angular.module('user.services', ['ngResource']).
factory('Users', function($resource) {
return $resource('http://localhost\\:8080/api/user/all.json', {}, {
query: {method:'GET', params:{}, isArray:false}
});
}).
factory('User', function($resource){
return $resource('http://localhost\\:8080/api/user/:userId.json', {}, {
get: {method:'GET'},
update: {method:'PUT'}
});
})
問題が解決しました!!!!
サービス：
// User Service
angular.module('user.services', ['ngResource']).
factory('User', function($resource){
return $resource('/api/user/:userId', {userId: '@id'}, {
query: {method: 'GET', headers: [{'Content-Type': 'application/json'}, {'Accept' : 'application/json'}]},
get: {method:'GET', headers: [{'Content-Type': 'application/json'}, {'Accept' : 'application/json'}]},
update: {method:'PUT', headers: [{'Content-Type': 'application/json'}, {'Accept' : 'application/json'}]}
});
})