Angularテンプレートを動的にロードする

Question

私はAngularには新しく、テンプレートは間違った言葉だと思います。私が意味するものは次のとおりです。

私たちは、角度のあるフロントエンドにデータを提供するRailsバックエンドを持っています。このデータを表示するにはng-repeatを使用する必要があります。問題は、必要なテンプレートが、Railsが提供するデータの一部として来ることです。

JSONのRailsによって提供

[ 
    { 
    data: { 
     title: "example title", 
     body: "example body" 
    }, 
    template: "<h1>{{title}}</h1><p>{{body}}</p>" 
    }, 
    { 
    data: { 
     body: "example body two" 
    }, 
    template: "<div>{{body}}</div>" 
    } 
] 

我々は、彼らが（ボディ、タイトル、キャプションのために呼んバインディングテンプレートがどのように見えるか、があるでしょうどのように多くのレコードを知っている、またはしていない：ここでは例です、など）。テンプレートをローカルに保存することはできないため、すべてのデータはRailsのバックエンドから取得する必要があります。これは、指定されたテンプレートを使用して、それにdataオブジェクトを結合する

<span ng-repeat="block in blocks"> 
    <template src="block.template" data="block.data"></template> 
</span> 

：ここ

は私が達成したいものの擬似コードです。

---

また、わかりやすく説明する必要がある場合は、これもまた新しくなりました。ありがとうございました！

EDIT：これは私のディレクティブでの試みです。 templateはblock.templateで表される目的のテンプレートにアクセスできないように見えるため、機能しません。これはデータのバインドをカバーするものではないので、私はその指示を一度修正する必要があります。

app.directive("template", function() { 
    return { 
    template: block.template, 
    scope: { 
     block: '=data' 
    }, 
    restrict: 'E' 
    }; 
}); 

EDIT 2：

ここでは動作しません別の試みです。この1は、画面上のテンプレートを示しているが、コンソール、それがエラーにscope.$watch is not a function

app.directive('template', function ($compile) { 
    return { 
    restrict: 'A', 
    replace: true, 
    scope: { 
     tmpl: '=template' 
    }, 
    link: function postLink(scope, element, attrs) { 
     scope.$watch('tmpl', function (block) { 
     element.html(block.template.blank_template); 
     $compile(element.contents())(block.payload); 
     }); 
    } 
    }; 
}); 

Answer 1

あなたはディレクティブでそれを行うことができます。

基本的に

//Assuming App is your Angular App Instance and Angular at least 1.4ish 
app.directive('template',['$compile', function($c) { 
     return { 
     link: function (scope, el, attrs, controller) { 
      el.html(scope.template); 
      $c(el.contents())(scope); 
     }, 
     scope: { 
      template: "=tpl", 
      data: "=data" 
     } 
     } 
}); 

の線に沿って何かそれから

<span ng-repeat="block in blocks"> 
    <template tpl="block.template" data="block.data"></template> 
</span>