javascript - 使用来自 json 响应的动态布局 : angularJS

Question

在我的网络应用程序中，在搜索结果中，每个项目可以根据项目类型具有不同的外观。为了实现这一目标，我正在考虑在 json 响应中包含带有该特定项目的数据占位符的布局。如何将范围数据绑定(bind)到 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 响应中的占位符与范围数据绑定(bind)。有什么办法可以做到吗？如果没有，您建议我如何解决这种情况？

谢谢!

Answer 1

虽然这显然行不通:

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

因为您告诉 Angular 显示 item.template 内的 html，但您真正想要的是告诉它将 item.template 视为标记应该以与 template inside 指令类似的方式进行解析。

但是，您可以做的是定义自定义指令，以所需的方式处理 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 的更改不会得到反射(reflect)，但您可以通过添加 $watch 轻松扩展它。

您可以找到工作示例 here .