0

我正在做一个带有内联编辑的表单。我在这里找到了一个例子： https ://stackoverflow.com/a/16739227/169252

我适应了我的需要。这是一些代码（使用nodejs、express和jade）。指令：

// Inline edit directive
app.directive('inlineEdit', function($timeout) {
  return {
    scope: {
      model: '=inlineEdit',
      handleSave: '&onSave',
      handleCancel: '&onCancel'
    },
    link: function(scope, elm, attr) {
      var previousValue;

      scope.edit = function() {
        scope.editMode = true;
        previousValue = scope.model;

        $timeout(function() {
          elm.find('input')[0].focus();
        }, 0, false);
      };
      scope.save = function() {
        scope.editMode = false;
        scope.handleSave({value: scope.model});
      };
      scope.cancel = function() {
        scope.editMode = false;
        scope.model = previousValue;
        scope.handleCancel({value: scope.model});
      };
    },
    templateUrl: 'partials/inline-edit'
  };
});

控制器：

 myControllers.controller('MyCtrl', ['$scope', '$http',
  function MyCtrl($scope, $http) {
    $scope.name          = "Name";
    $scope.surname       = "Surname";
    $scope.email         = "Email";

    $scope.save_user = function() {
        //What do I do here??
    };

指令模板 (' partials/inline-edit'):

div(class="inline_edit_div")
  input(class="inline_edit_input" type="text" on-enter="save()" on-blur="cancel()" on-esc="cancel()" ng-model="model" ng-show="editMode")
  span(ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false")
    span(ng-hide="editMode" ng-click="edit()")
      div(class="inline_edit_text")
        {{model}}

和表格本身：

div(ng-controller="MyCtrl")
 form(id="user_form")
  div.inline.action_buttons
    button(class="buttons action_button" ng-click="save_user()") Save
  div.info
        div.element
          label(class="form") Name
          div.form(inline-edit="name")
        div.element
          label(class="form") Surname
          div.form(inline-edit="surname")
        div.info_element_bottom
          label(class="form") Email
          div.form(inline-edit="email")

我的问题：如此处所建议的， 如何将表单提交到服务器上的控制器？ 我可以在提交时发布访问$scope例如$scope.person.

但是，使用 inlineEdit 指令，我正在创建继承范围 - 所以我无法弄清楚如何从我的控制器访问我的表单数据。 https://stackoverflow.com/a/13428220/169252表示您无法从父范围访问子范围。

简而言之，我如何使用 $http 提交整个表单（最好我想了解如何在没有传统 POST 的情况下重新加载整个页面）？控制器中的$scope.save_user被调用，但从那里我不知道更多。

4

1 回答 1

0

这似乎可行，@jpmarin 的评论之一向我建议：

 $scope.user = {
        names: 'Names',
        surnames: 'Surnames',
        email: 'Email'
    };

然后在表格中

div.element
      label(class="form") Name
      div.form(inline-edit="user.name")
    div.element
      label(class="form") Surname
      div.form(inline-edit="user.surname")
    div.info_element_bottom
      label(class="form") Email
      div.form(inline-edit="user.email")

和控制器：

 $scope.save_user = function() {
        $http.put('/save_user',$scope.user).success(function() {
            alert("Callback!");
        }).error(function() {
            alert("Failed");
        });
    };

现在唯一的问题是，当我在单个输入元素上按 Enter 时，它会触发表单提交。应该不会太难修复。编辑：最后一个问题也已通过删除表单标签来解决，即删除form(id="user_form")

于 2013-10-25T05:42:02.600 回答