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，因为它应该以类似于a的方式解析标记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。

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

1 个答案: