0

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

每种渲染类型都存在于不同的 HTML 文件中，我让用户选择一个带有 <select> 的渲染器，该渲染器驱动 ng-include 的 src 以加载不同的渲染器。到目前为止，这工作正常。

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

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

这是一个示例：http ://plnkr.co/edit/1RXVVu?p=preview 。我希望在 a.html 和 b.html 中，能够在 <hr> 上方的 DOM 中实例化它们的弹出控件，同时将它们的文本内容放在 <hr> 下方。（虽然在示例中可以只在 a.html 和 b.html 中分别放置一个 hr 标记，但真正的 DOM 结构要复杂得多，而且无法承受。）

谢谢！

4

2 回答 2

2

我创建了一个指令来将元素移动到另一个容器。这是我从你的笨拙中改变的。

我添加了 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（或选择器）可以动态地来自模型。

于 2013-04-12T04:54:30.463 回答
0

我在这里将 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 元素。我还没有检查以确保这里没有泄漏，但这是一个问题。

我偶然遇到的其他事情，用于教育他人：

  • JQuery 需要在Angular之前加载。
  • 这个带有指令的应用扩展需要在 HTML 中的 ng-app 指令上命名。
于 2013-04-12T19:16:39.747 回答