AngularJS - 转发器内闪烁的$ compile和嵌套指令

Question

我有一个对象数组，表示项目的状态。根据这些对象的type属性，我需要显示一个不同的指令。

下面是一个简化版本，显示了我正在尝试的内容（哪一个州指令）。我有一个'渲染器'指令，$指令基于type属性编译所需的指令。

问题：页面加载时，嵌套指令显示在编译指令之后。意思是有一个'闪烁'。如果我不使用$ compile并在转发器中使用ng-switch，则不会发生这种情况。

有谁可以解释发生了什么？谢谢你

<div ng-repeat="item in items">
  <renderer data="item"></renderer>
</div>



app.controller('MainCtrl', function($scope) {
$scope.items = [
    {
        type : 'normal',
        desc : {
            name : 'john doe',
            address : 'test',
            fax : 'test',
            phone : 'test'
        },
        desc2 : {
            name : 'another name',
            address : 'test',
            fax : 'test',
            phone : 'test'  
        }
    }
  ]
});

app.directive('renderer', function ($compile) {
return {
    restrict : 'E',
    scope : {
        data : '='
    },
    link : function (scope, element, attributes) {
        var template = '<'+ scope.data.type + ' data="data"></' + scope.data.type + '>';
        var content = $compile(template)(scope);
        element.replaceWith(content);
    }
};
});


app.directive('normal', function () {
return {
    template : '<div>Some layout content <another-directive data=ctrl.data.desc></another-directive></div>',
    controllerAs : 'ctrl',
    bindToController : {
        data : '=',
    },
    scope : {},
    controller : function () {
      //controller logic

    }
}
});

更新：更新以使用不闪烁的ng-switch显示代码并立即显示所有内容...我认为我会在ng-switch内部出现性能问题重复而不是渲染器指令路线...

        <div ng-repeat="item in items">
          <div ng-switch="item.type">
              <normal ng-switch-when="normal" data="item"></normal>
              <error ng-switch-when="error" data="item"></error>
              <warning ng-switch-when="warning" data="item"></warning>
          </div>
        </div>