Javascript 使用json响应中的动态布局：angularJS

在我的web应用程序中，在搜索结果中，根据项目的类型，每个项目都可以有不同的外观。为了实现这一点，我考虑在json响应中包含带有特定项的数据占位符的布局。如何将范围数据绑定到json响应模板中的占位符

例如。 我的搜索结果如下所示：

<li ng-repeat="item in items">
<div ng-bind-html="item.template"></div>
</li>

JSON响应如下所示：

[{
"template_name":"One",
"template":"<div ng-repeat='subitem in item.subitems'>{{subitem.name}}</div>",
"subitems":[{name:"John"},{name:"Jane"}]
},
{
"template_name":"Two",
"template":"<div ng-repeat='subitem in item.subitems'>{{subitem.name}}</div>",
"subitems":[{name:"John"},{name:"Jane"}]
}
]

[{
“模板名称”：“一个”，
“模板”：“{subitem.name}}”，
“子项”：[{name:“John”}，{name:“Jane”}]
},
{
“模板名称”：“两个”，
“模板”：“{subitem.name}}”，
“子项”：[{name:“John”}，{name:“Jane”}]
}
]

如您所见，我需要将json响应中的占位符与范围数据绑定。有什么办法吗？如果没有，您建议我如何解决这种情况

---

谢谢大家!

虽然这显然不起作用：

<li ng-repeat="item in items">
  <div ng-bind-html="item.template"></div>
</li>

其中，

动态模板

定义如下：

 module.directive('dynamicTemplate', function($compile){
    return {
      scope: {
        dynamicTemplate:'='
      },
      replace:true,
      transclude: true,
      link: function($scope, $element, $attrs, _, $transcludeFn){
        // since we have isolate scope - transclude the element so it has access 
        // to item and anything else available inside ng-repeat
        $transcludeFn(function($childElement, $childScope){ 
          var link = $compile($scope.dynamicTemplate);
          var bound = link($childScope);
          $element.append(bound);
        });
      }
    };
  });

当然，这并不理想，因为对

item.template

的更改不会反映出来，但您可以通过添加

$watch

轻松地扩展它

---

您可以找到工作示例。

通过模板缓存为类型添加模板，那么您的解决方案需要知道的就是类型X映射到模板Y。您的JSON数据响应不需要参与其中。我的模板需要在服务器中动态构建。这就是为什么我不能选择本地存储的模板。它们需要在获取数据时生成？那没有任何意义。您可以根据需要动态构建它们，然后将它们添加到模板缓存中-例如，请参见。对我知道这听起来很荒谬。但情况是这样的。这是一个搜索结果页面。根据结果项的类型，每个结果项的外观可能不同。因此，在阅读单个项目之前，无法知道要使用哪个模板。这就是我决定用json response.Hi发送模板数据的原因。非常感谢你的回答。它工作得很好。然而，我并不完全明白这是怎么回事。你能告诉我一篇关于这方面的文章吗？

 module.directive('dynamicTemplate', function($compile){
    return {
      scope: {
        dynamicTemplate:'='
      },
      replace:true,
      transclude: true,
      link: function($scope, $element, $attrs, _, $transcludeFn){
        // since we have isolate scope - transclude the element so it has access 
        // to item and anything else available inside ng-repeat
        $transcludeFn(function($childElement, $childScope){ 
          var link = $compile($scope.dynamicTemplate);
          var bound = link($childScope);
          $element.append(bound);
        });
      }
    };
  });