使用来自 json 响应的动态布局：angularJS

Question

在我的网络应用中，在搜索结果中，每个项目都可以根据项目的类型具有不同的外观。为了实现这一点，我正在考虑在 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"}]
}
]

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

谢谢！

Answer 1

虽然这显然行不通：

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

既然您告诉 angular 显示位于 item.template 内的 html，但您真正想要的是告诉它处理 item.template，因为它应该以类似于 template 内的方式解析的标记指示。

但是，您可以做的是定义自定义指令，以所需的方式处理item.template。例如：

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

其中dynamic-template定义如下：

 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 轻松扩展它。

您可以找到工作示例here。