angularjs-directive - angular.js: 单击编辑指令表单更新模型,但 http.post 仍然使用"old" 值

  显示原文与译文双语对照的内容
0 0

我有一个奇怪的问题,创建一个带有 angular.js的click-to-edit指令:

模型在表单提交时获得更新,但更新后的模型不在以下 http.post, 中使用。

例如在表格中: 在"便笺"的第1 个记录中编辑第一个记录的字段,浏览器控制台将显示"mynote"的注释属性值,但服务器仍然是recieves属性。

为了演示这个问题,我在github上创建了一个小示例: https://github.com/madmarkus/angular.js-Sample i 我将在这里只展示相关的代码。

我的控制器看起来像

function ListCtrl($scope, $http) {
 $http.get('./items.json').success(function (data) {
 $scope.items = data;
 }).error(
 function(){
 console.log("Failed to load items.");
 });
 $scope.saveEditor = function () {
 $scope.saveItem(this.item);
 };
 $scope.saveItem = function (w) {
 console.log("Attempt to safe:");
 console.log(w); 
 $http.post("http://localhost:8888", w, {}).success(function () {
 console.log("post successfully sent");
 }).error(function (data, status, headers, config) {
 console.log("Error on save.");
 });
 };
}

而 app.js 就像

app = angular.module('planner', []).
 config(['$routeProvider', function ($routeProvider) {
 $routeProvider.
 when('/items', {templateUrl: 'item-list.html', controller: ListCtrl}).
 otherwise({redirectTo: '/items'});
 }]);
app.directive("clickToEdit", function() {
 var editorTemplate = '<div>' +
 '<div ng-hide="view.editorEnabled" ng-click="enableEditor()" class="editable" ' +
 'style="width: 100%; min-height: 1.5em; display:inline-block"> ' +
 '{{value}} ' +
 '</div>' +
 '<form ng-show="view.editorEnabled">' +
 '<input ng-model="view.editableValue"><br/>' +
 '<button class="btn" ng-click="save()" type="submit">Save</button>' +
 ' or ' +
 '<a ng-click="disableEditor()">cancel</a>.' +
 '</form>' +
 '</div>';
 return {
 restrict:"A",
 replace: true,
 template: editorTemplate,
 scope: {
 value:"=clickToEdit",
 saveCallback:"&saveFunction"
 },
 controller: function($scope) {
 $scope.view = {
 editableValue: $scope.value,
 editorEnabled: false
 };
 $scope.enableEditor = function() {
 $scope.view.editorEnabled = true;
 $scope.view.editableValue = $scope.value;
 };
 $scope.disableEditor = function() {
 $scope.view.editorEnabled = false;
 };
 $scope.save = function() {
 $scope.value = $scope.view.editableValue;
 $scope.disableEditor();
 $scope.saveCallback();
 };
 }
 };
});

像上面的mentined,当我使用click&编辑将第一个记录的注释值更改为 myNote,bowser和控制台中的js调试器在编辑值之后显示正确的值:

[22:24:20.026] Attempt to safe: 
[22:24:20.026] ({id:"977", datetime:"21.07.2013 10:00", note:"myNote", remark:"important", comment:"editme", $$hashKey:"004"})

但是服务器接收到的仍然是值:

Received body data:
{"id":"977","datetime":"21.07.2013 10:00","note":"secret","remark":"important","comment":"editme"}

从我所读到的,它可以能是一个范围问题,但是我只是找不到正确的方法来处理它。 也与 $scope.$apply()... 一起玩

任何提示?

对代码的任何注释也非常感激;)

多谢了

Markus

时间:原作者:1个回答

0 0

你有一个定时问题。 你需要注意,当你正在打印的对象发生更改时,Chrome 会更新 console.log 中的消息。

指示回调时,它没有更新你正在绑定的值。 你可以通过在 Chrome ( 把它们放在 console.log 电话上) 中添加断点来。 快速解决这里问题的方法是调用 $timeout, 内的回调,因为它会导致执行另一个摘要,然后知道值:

controller: function($scope, $timeout) {
//...
 $scope.save = function() {
 $scope.value = $scope.view.editableValue;
 $scope.disableEditor();
 $timeout(function() {
 $scope.saveCallback();
 });
 };
}
原作者:
...