Question

我需要在指令中使用动态模板。我使用replaceWith（）方法：

var template;
switch (scope.type) {

  case 'type1':
      template = angular.element('<div>Type1</div>');
      break;

  case 'type2':
      template = angular.element('<div>Type2</div>');
      break;
}

element.replaceWith(template);

在范围中添加新元素之前，它可以正常工作。当$ scope更新时，我在容器中看到两个元素：

<some-content ng-repeat="content in contents" type="content.type" class="ng-scope ng-isolate-scope"></some-content>
<div class="test">Type1</div>
<some-content ng-repeat="content in contents" type="content.type" class="ng-scope ng-isolate-scope"></some-content>
<div class="test">Type2</div>

演示：https://jsfiddle.net/6g35519z/1/

Answer 1

在Angular中动态布局视图通常不是一个好习惯;你应该真正创建一个动态显示其部分的单一布局。对于具有二进制状态的单独组件，可以使用ngIf指令，对于切换情况，可以使用ngSwitch（就像你的那样）。

<div ng-switch="type">
    <div ng-switch-when="type1">Type1</div>
    <div ng-switch-when="type2">Type2</div>
</div>

AngularJS带有指令动态模板

1 个答案: