既存の要素にng-repeatを追加

Question

私はRailsアプリケーションに角を加える作業をしています。レンガの壁に当たったと思います。私はtodosモデルを持ち、部分を@todosをレンダリングします。これは私に与えます：

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

ちょうど期待通りです。今、私はajaxでtodosを作成し、新しいtodoを角度でレンダリングできるようにしたいと考えています。私はドスの親の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> 

です私の部分：私はそう$scope.todosに既存の要素をバインドする方法を見つけようとしている

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

私がそれを変更すると、ng-repeatはDOMの変更を反映します。私は行方不明のものがありますか？

免責事項：フロントエンドとバックエンドを分離してapiを使用してすべてのトードをつかむことで、これを簡単に行うことができますが、角度とレールを近づけて、 JavaScriptユーザー。私は彼らがそれを使用しないことを選択した場合、単に空白のページが表示されることを望んでいません。

Answer 1

JSONをRubyテンプレートの文字列として出力することをお勧めします。その代わりに、JSONを返すデータAPIを用意することをお勧めします。

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

そして、あなたのテンプレートだけで使用できます：この方法は、お使いのコントローラが呼び出すことができます

基本的に

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

、我々はHTMLビューとJSONデータの区別を作っています。サーバーは、異なるデータで再利用できる一般的なテンプレートを返す必要があり、apiは異なるテンプレートで使用できるデータを返す必要があります。