将ngInclude载入到多个DOM位置

我在AngularJS中构建了一个应用程序，用户创建一些应用程序状态，然后有多种不同的方式来呈现它。（例如，假设他们要输入三个数字，然后他们可以选择将它们呈现为折线图或饼图。）将ngInclude载入到多个DOM位置

每种呈现类型都位于不同的HTML文件中，并且我让用户选择<选择>的渲染器，它驱动ng-include的src以加载不同的渲染器。到目前为止，这工作正常。

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

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

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

谢谢！

来源

2013-04-12 Tim Dierks

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

我加入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>

我加入小时以上的容器：

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

我指定与容器ID的指令属性在a.html和b.html ：

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

容器id（或选择器）可能来自动态模型。

来源

2013-04-12 04:54:30 jpmorin

这真是太好了，谢谢，并且让我找到了解决方案。下面我添加了最终实现的链接，仅供参考。 –

我在这里将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(); 
     }); 
     } 
    }; 
    }]); 
})();

一个注意：我不得不听$摧毁范围的事件，除去移动DOM元素的窗格中的变化时。我还没有检查确定这里没有泄漏，但这是一个问题。

随机其他的事情我碰到了，别人的教育：

JQuery的需要角之前加载。

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

来源

2013-04-12 19:16:39

将ngInclude载入到多个DOM位置

回答

相关问题