Question

我正在AngularJS中构建一个应用程序，用户在其中创建一些应用程序状态，然后有许多不同的方式来呈现它。（对于一个蹩脚的例子，假设他们要输入三个数字，然后他们可以选择将它们渲染成折线图或饼图。）

每种呈现类型都存在于不同的HTML文件中，我让用户选择带有＆lt; select＆gt;的呈现器。它驱动src为ng-include加载不同的渲染器。到目前为止，这种方法很好。

现在，一些渲染模式有额外的控制;例如，饼图可能具有“3D”复选框。不同的渲染器将具有完全不同的控件。所以我希望这些包含的文件也能创建用于自定义其演示文稿的控件。

这是我的问题：如何加载单个文件并让它在DOM中的一个位置创建其附加控件，同时将其主要内容放入DOM中的另一个位置？附加控件不能出现在DOM中呈现的内容旁边：它位于完全不同的位置。

以下是一个示例：http://plnkr.co/edit/1RXVVu?p=preview。我希望，在a.html和b.html中，能够在＆lt; hr＆gt;上方的DOM中实例化其弹出控件，同时使其文本内容低于＆lt; hr＆gt;。（虽然在示例中可以在a.html和b.html中分别添加hr标记，但真正的DOM结构要复杂得多，并且不能承担这一点。）

谢谢！

Answer 1

我创建了一个将元素移动到另一个容器的指令。这是我从你的掠夺者那里改变的。

我添加了jQuery和指令：

<script type="text/javascript">
  (function() {
    var app = angular.module('myapp', []);

    app.directive('myContainer', [function() {
      return {
        restrict:'A',
        link: function(scope, elem, attrs) {
          angular.element(attrs.myContainer).replaceWith(elem);
          //angular.element(attrs.myContainer).html(elem);
          //angular.element(attrs.myContainer).appendTo(elem);
          //etc...
        }
      };
    }]);
  })();
</script>

我在hr上方添加了一个容器：

<div id="#container"></div>

我在a.html和b.html中指定了带有容器ID的指令属性：

<select ng-model="color" ng-options="c for c in ['red', 'blue']" data-my-container="#container"></select>

容器ID（或选择器）可以动态地来自模型。

Answer 2

我在这里将Plunker用于完整的解决方案：http://tdierks.github.io/angular-element-mover/，代码在这里：https://github.com/tdierks/angular-element-mover。

关键指令是：

(function() {
  var app = angular.module('controlMover', []);
  app.directive('moveTo', [function() {
    return {
      restrict: 'A',
      link: function(scope, elem, attrs) {
        elem.appendTo(angular.element(attrs.moveTo));
        scope.$on("$destroy", function() {
          elem.remove();
        });
      }
    };
  }]);
})();

一个注意事项：我必须在范围内侦听$ destroy事件，以便在窗格更改时删除已移动的DOM元素。我还没检查确定这里没有泄漏，但这是一个问题。

我遇到的其他随机事物，用于他人的教育：

需要在 Angular之前加载。

此指令的应用扩展程序需要在HTML中的ng-app指令中命名。

使用ng加载包含在多个DOM位置

2 个答案: