AngularJS ng-switch没有额外的DOM

Question

我在当前myObj（$scope内）有自定义指令和对象ng-repeat。

如果对象的type为html，我想使用一个模板：

<span ng-bind-html="myObj.html"></span>`

否则我想使用不同的模板：

<span>{{myObj.value}}</span>`

我的问题

这是无效的，因为自定义指令模板必须只包含一个根节点：

<span ng-if="myObj.type==='html'" ng-bind-html="myObj.html"></span>
<span ng-if="myObj.type!=='html'">{{myObj.value}}</span>

这是无效的，因为它会使用额外的DOM销毁我的页面:(将所有spans（可能有数千个）包装在不必要的ng-switch个节点中......）

<ng-switch on="myObj.type">
    <span ng-switch-when="html" ng-bind-html="myObj.html"></span>
    <span ng-switch-default>{{myObj.value}}</span>
</ng-switch>

我的问题

是否有可能让指令根据开关的结果选择它的模板，而不会创建额外的不必要的DOM？例如，您可以在创建指令时指定replace: true - 是否可以类似地使用ng-switch结果替换开关标记本身？

修改

我的指示：

return {
    replace: true,
    controller: 'ChunkController',
    scope: {
        chunk: '=deChunk'
    },
    templateUrl: de.partial.chunk,
    link: function (scope, el, attr, ctrl) {
        el.on('keydown', handleKeypress.bind(ctrl));
        el.on('click', ctrl.showValue);
    }
};

及其用法：

<div class="content" contenteditable="{{node.type!=='static'}}">
    <div data-ng-repeat="chunk in node.chunks" data-de-chunk="chunk"></div>
</div>

目的是让孩子<div> 替换，其序列为<span>s。

Answer 1

如果您将html存储在服务中，我甚至不会打扰，只是检查对象中是否存在myObj.html的值，以及它是否在链接器函数中编译和绑定html而不是使用ng -bind-HTML

这样的事情可能是：

myapp.directive('something',function($compile){
      return {
        link: function(scope,elem,attrs) {
          var obj = scope.$eval(attrs.something);
          if(obj.html) {
            var html = angular.element($compile(obj.html)(scope));
            elem.append(html);
          } else {
            //go get the data and set obj.html 
          }
        }
      }
    });