javascript - 使用 Angular x-editable 时如何通过 PUT 方法更新值？

Question

尝试使用 Angular x-editable 我已经为该项目设置了前端，但我不知道如何将请求从 javascript 发送到我的 Controller 更新操作以更新值。刷新页面后没有任何变化。有谁知道怎么做吗？

tasks_controller

  def update
    @task = Task.find(params[:id])

    respond_to do |format|
      if @task.update(task_params)
        format.json { head :no_content }
      else
        format.html { render action: 'edit' }
        format.json { head :no_content }
      end
    end
  end

  def task_params
    params.require(:task).permit(:id, :title, :due_date, :priority, :complete)
  end

html

<div ng-controller="Ctrl">
  <a href="#" editable-text="task.title">{{ task.title }}</a>
</div>

tasks.js

var app = angular.module('Todolist', ['xeditable']);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope) {
  $scope.task = {
    title: 'awesome task'
  };

});

rake 动路线

PUT    /users/:user_id/tasks/:id(.:format)      tasks#update

Answer 1

发送与 Angular-xeditable 并不真正相关，因为它只是修改范围中的值(在您的情况下是 $scope.task.title )。你想做的是 watch对于值更改或使用按钮将数据提交到服务器。

要发送 HTTP PUT 请求，您可以使用 Angular 的普通 $http 等。 。使用$http你可以做到

$http.put('/users/' + $scope.userId + '/tasks' + $scope.taskId, {task: $scope.task}).
  then(function(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

这里我假设您已经定义了$scope.userId和$scope.taskId。

现在您可以像这样将其包含在 watch 内部

scope.$watch('name', function(newValue, oldValue) {
  // Here do the above $http.put
});

或者像这样的 HTML 按钮

<button ng-click="sendPut();">Call backend</button>

带有 Controller 代码，例如

$scope.sendPut = function () {
  // Here do the above $http.put
}