如何动态操作 angular ng-include 命令

Question

是否可以将 ng-include 元素动态添加到 HTML 页面并使其生效？

我有一个 Drag N Drop 应用程序，您可以在其中将一个元素拖到页面上，然后在拖放区中该元素将替换为更详细的元素。例如，您拖动一个显示日历的框，当它被放下时，会显示一个日历。需要明确的是，一个新元素被创建并添加到 DOM，它在删除之前不存在。

当元素被删除时，我希望我可以用一块 HTML 替换它，如下所示。而不是像现在这样在字符串中定义标记，这不是很好：

<div class='panel panel-default'>
  <div class='panel-heading'>
    <h3 class='panel-title'>
      <span class='glyphicon glyphicon-remove'></span>
      WIDGET NAME
      <spanclass='glyphicon glyphicon-cog'></span>
    </h3>
  </div>
  <div class='widgetContainer' ng-include="'widgets/widget.html'"></div>
</div>

将上面的 HTML 插入页面时，不包括引用的 HTML 文件。

我希望发生的是 HTML 包含小部件标记的文件被加载并包含在适当的位置。

我是 Angular 的新手，所以我不知道这是不是因为：

不支持动态添加 ng-include
我是否需要对控制器做些什么来处理这个逻辑
我应该使用标签而不是属性吗？
这是不可能的。

请提供示例和解决方案，正如我所说的，我是 Angular 的新手。

谢谢

更新

用于创建我想动态添加到页面的 HTML 的代码如下所示

$("#template").append(
    " \
    <div class='panel panel-default'>\
    <div class='panel-heading'>\
    <h3 class='panel-title'>\
    <span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeElement(this)'></span>\
    " + widgetDetail['serviceName'] + "\
    <span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
    </h3>\
    </div>\
    <div class='markupContainer' ng-include=\"'widgets/" + id +".html'\"></div>\
    </div>\
    "
);

我已经将完整的代码上传到GitHub。拖放方面目前由 HTML5 javascript 处理，可以在文件 /public/javascripts/js_dragndrop.js 中看到。添加到页面的新小部件（上面的代码）位于 /public/javascripts/jq_dragndrop.js

我正处于原型设计阶段，试图计算出 DragNDrop 元素，所以不要指望高质量的代码:)

Answer 1

我找到了一种实现我想要的方法，方法是将 HTML5 拖放代码移动到 AngularJS 指令中，然后（使用此 [ Compile dynamic template from outside of angular ] 作为指南）得到html 模板正在加载到我想要的位置。

主要代码更改如下所示：

angular.element(document).injector().invoke(function ($compile) {

  var widgetDetail = widgets[e.dataTransfer.getData('Text')];

  var obj = $("#template");
  var scope = obj.scope();

  obj.append(
    "<div class='panel panel-default'><div class='panel-heading'><h3 class='panel-title'>\
     <span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeWidget(this)'></span>\
     " + widgetDetail['serviceName'] + "\
     <span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
     </h3></div><div class='markupContainer' ng-include=\"'widgets/" + widgetDetail['serviceId'] + ".html'\"></div>\
     "
   );

   $compile(obj.contents())(scope);
   scope.$digest();
});

如果您有兴趣，可以在 Git 项目 /public/controllers/template.js 中找到完整代码。

如何动态操作 angular ng-include 命令

how to dynamically action an angular ng-include command

javascript

angularjs

angularjs-ng-include