Question

我对Angular很新，所以我认为模板是错误的。这就是我的意思：

我们有一个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所代表的所需模板。这不会涵盖对数据的绑定，所以我必须在修复指令后才能使用它。

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>

以角度模板

1 个答案: