对现有元素进行ng-repeat

Question

我正在努力为我的Rails应用添加角度，我想我已经碰到了一堵砖墙。我有一个todos模型，并且部分渲染@todos。这给了我：

<h1>Todo 1</h1>
<h1>Todo 2</h1>
<h1>Todo 3</h1>

正如预期的那样。现在我希望能够使用ajax创建待办事项，并使用angular渲染新的待办事项。我尝试在todos父div上做ng-repeat，但这只是给了我：

<h1>Todo 1</h1>
<h1>Todo 2</h1>
<h1>Todo 3</h1>
<h1>Todo 1</h1>
<h1>Todo 2</h1>
<h1>Todo 3</h1>
<h1>Todo 1</h1>
<h1>Todo 2</h1>
<h1>Todo 3</h1>

这是我的部分：

<div ng-init="todos = <%= todos.to_json %>" ng-repeat="todo in todos">
    <h1 class="title"><%= link_to("{{ todo.title }}", todo) %></h1>
</div>

我试图找到一种方法将现有元素绑定到$scope.todos，这样当我更改它时，ng-repeat将反映DOM中的更改。有什么我想念的吗？

免责声明：我知道我可以通过分离前后端并使用api抓住我所有的待办事项轻松地做到这一点，但我试图尽可能接近角度和导轨以适应非-javascript用户。如果他们选择不使用它，我不希望他们只是被呈现一个空白页面。

Answer 1

我建议不要在ruby模板中输出JSON作为字符串。相反，更好的做法是拥有一个返回JSON的数据API;这样，您的控制器可以调用：

$http.get('/my/api/', (data) => { $scope.todos = data; });

您的模板可以是：

<div ng-repeat="todo in todos">
    ...
</div>

基本上，我们正在区分HTML视图和JSON数据。服务器应该返回一个可以重复使用不同数据的通用模板，api应该返回可以在不同模板中使用的数据。