Question

我一直在使用rails，并开始整合Angular.js。为了让自己开始，我正在做一个简单的（你猜对了）todo应用程序。

在我的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的大量文档将整个角度结构集成到您的rails应用程序中，就像这个有角度的rails scaffold插件https://github.com/patcito/angularjs_scaffold一样。我认为这是一种非常突兀的方式，可以将角度插入到你的应用程序中，感觉就像我正在摆脱使轨道变得惊人的东西，这就是它将数据集成到视图中的方式。

如何平滑而简单地在轨道中实现角度

然后我偶然发现了接下来两个惊人的资源。始终信任的Ryan Bates :)，http://railscasts.com/episodes/405-angularjs?view=comments以及这个令人惊叹的YouTube视频http://www.youtube.com/watch?v=UjYIVwGbNC4，讨论了整合rails和angular。这是我能找到的两个最合法的资源，它集成了我希望它集成的格式的角度。

这可能看起来像我扔给你的很多信息，但在我消化了所有这些信息后，我开始明白我将如何整合角度和轨道。 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>

我对rails中的角度相对较新，但我认为这应该有效。应该注意的是，对于角度来说，可能有5种其他可接受的解决方案。我发现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>

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

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

2 个答案:

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

如何平滑而简单地在轨道中实现角度