在Angular模板中动态加载

Question

我对Angular很陌生，所以我认为template是一个错误的词。 这就是我的意思：

我们有一个Rails后端，用于将数据提供给Angular前端。 我需要使用ng-repeat来展示此数据。 问题是，所需模板是Rails为我们提供的数据的一部分。 这是一个例子：

Rails提供的JSON

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

我们不知道会有多少条记录，模板是什么样的，或者它们需要什么绑定（正文，标题，标题等）。 我无法在本地存储模板，因此所有数据都必须来自Rails后端。

这是我想要完成的伪代码：

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

这将使用指定的模板并将data对象绑定到该模板。

---

再次，我是新手，所以如果需要澄清，请告诉我。 谢谢！

编辑：这是我对指令的尝试。 由于template似乎无法访问由block.template表示的所需模板，因此它block.template 。 这不会涉及绑定数据，因此一旦我修改了指令，就必须在其中进行工作。

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

编辑2：

这是另一种无效的尝试。 这个在屏幕上显示了模板，但是在控制台中它会错误显示该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>