将 Angular.js 操作绑定到 Ruby on Rails 操作

Question

我使用 Rails 已经有一段时间了，现在开始尝试集成 Angular.js。为了让自己继续前进，我正在制作一个简单的（你猜对了）待办事项应用程序。

在我的 rails 控制器中，我做了一个简单的操作来在“完成”和“未完成”状态之间切换任务 - 可在 /tasks/:ID/complete 以 PUT 请求的形式获得。

def complete
    @task = Task.find(params[:id])
    @task.toggle!(:complete)
    respond_with @task
end

我的视图列出了所有任务，并在链接旁边显示了它们的名称，点击该链接后，我想为该任务调用“完成”操作。

<ul>
  <li ng-repeat="task in tasks">
    <a href="javascript:;" ng-click="completeTask(task.id)" class="complete-{{task.complete}}"></a>
    {{task.name}}
  </li>
</ul>

最后，在我的 js 控制器（咖啡脚本）中：

app = angular.module("TaskList", ["ngResource"])

@ListCtrl = ($scope, $resource) ->
  Task = $resource("/tasks/:id", {id: "@id"}, {
    update: {method: "PUT"}
    complete: {method: "PUT"}
  })
  $scope.tasks = Task.query()

  $scope.completeTask = (task_id) ->
    Task.complete(task_id)

我不确定“this”是否是 Angular 中的可用选项，但我在文档方面遇到了一些问题。在我掌握最佳实践的同时，谁能指出我正确的方向？

谢谢！

Answer 1

所以我一直在摆弄 angular+rails 并阅读大量文档。我想我会分享一些我在这里找到的东西，可以帮助你解决一些问题。

我应该如何构建我的应用程序？

很多关于 rails 和 angular 的文档都将整个 angular 结构集成到您的 rails 应用程序中，就像在这个 angular rails 脚手架插件 https://github.com/patcito/angularjs_scaffold 中一样。我认为这是一种将 Angular 插入您的应用程序的非常突兀的方式，感觉就像我正在远离让 rails 令人惊叹的东西，这就是它将数据集成到视图中的方式。

如何在 Rails 中平滑简单地实现 Angular

然后我偶然发现了接下来的两个惊人的资源。一直值得信赖的 Ryan Bates :)、http://railscasts.com/episodes/405-angularjs?view=comments 和这个令人惊叹的 youtube 视频 http://www.youtube.com/watch?v=UjYIVwGbNC4，其中谈到了集成导轨和角度。这些是我能找到的两个最合法的资源，以我希望它集成的格式集成 angular。

这似乎是我向你抛出的很多信息，但在我消化了所有这些信息后，我开始了解如何整合 angular 和 rails。 Angular 为您提供了很多关于如何实现事物的选项，因此学习如何选择集成它取决于您自己。所以现在让我们回到你的问题。

根据您正在做的事情，您应该将所有逻辑放入角度控制器中的完整操作中。至少如果您尝试以 AJAXy 方式保存数据。这就是我会做的事情来做我认为你想做的事情，

tasks_controller.rb

class TasksController < ApplicationController
  respond_to :json

  def index
    @tasks = Task.all
  end

  def update
    @task.find(params[:id])
    respond_with @task.update_attributes(params[:task])
  end
end

tasks.js.coffee

app = angular.module("TaskList", ["ngResource"])

#I created a factory of your task to abstract it a little

app.factory 'Task', ($resource) ->
  $resource('/tasks/:id', {id: '@id'}, 
    {update: {method: 'PUT'}})

@ListCtrl = ($scope, $resource) ->
  $scope.tasks = Task.query()

  $scope.completeTask = () ->
    Task.save($scope.task)

视图/任务/index.html.erb

<ul>
  <li ng-repeat="task in tasks">
    <input type="checkbox"
    <!-- This puts it in checked mode if the task is complete when the page is loaded -->
    ng-checked="task.complete"
    <!-- use this to utilize two-way-data-binding. -->
    ng-model="task.complete"
>
    <a ng-click="completeTask()" ng-class="completed:{{task.complete}}">
      {{task.name}}
    </a>
  </li>
</ul>

我对导轨的角度比较陌生，但我认为这应该可行。应该注意的是，您可能还有 5 种其他可接受的解决方案可以用 angular 来解决。我发现 Angular 提供了许多可以以不同方式实现的工具，因此您需要找出解决问题的最佳格式。祝你好运！

Answer 2

<ul>
  <li ng-repeat="task in tasks">
    <a ng-click="completeTask(task.id)" class="complete-{{task.complete}}"></a>
{{task.name}}
  </li>
</ul>

您需要一些东西来识别您正在更新的任务。