带有指令动态模板的 AngularJS答案

【问题标题】：AngularJS with directive dynamic templates带有指令动态模板的 AngularJS
【发布时间】：2016-02-03 00:57:27
【问题描述】：

我需要在指令中使用动态模板。我为此使用 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/

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

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

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

【讨论】：

谢谢，我会试试的。问题是我在其他地方需要这些模板。我不想复制它们。
您可能希望使它们成为单独的指令，然后将它们包含在 ng-switch 块中。它们将是便携和可重复使用的。
这是个好主意。我在 jQuery UI Draggable 辅助方法中使用这个技巧和模板。我不知道在这种情况下如何使用指令。
在 jQuery 中，您所做的绝对是有意义的。然而，jQuery 和 Angular 之间的根本差距，以及您应该避免混合使用它们的原因是，因为 jQuery 是一种控制 DOM 的方式，而 Angular 是一种表达您希望 DOM 最终看起来如何的方式，然后提供所需的数据。至于不知道如何使用指令，你对它们有什么了解？您可能遇到什么问题？
好的，我认为这是另一个问题。我将尝试完全理解指令并用角度意识形态重新组织我的应用程序。感谢您的帮助。