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 のコメントの 1 つが私にそれを提案しました:

 $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キーを押すと、フォーム送信がトリガーされることです。修正するのはそれほど難しくないはずです。EDIT：この最後の問題は、フォームタグを削除するだけで解決されました。form(id="user_form")

于 2013-10-25T05:42:02.600 に答える