如何动态操作角度 ng-include 命令

how to dynamically action an angular ng-include command

本文关键字：ng-include 命令 操作 何动态 动态      更新时间：2023-09-26

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

我有一个拖放应用程序，您可以在其中将元素拖到页面上，然后在拖放区域中将元素替换为更详细的元素。例如，您拖动一个显示"日历"的框，当它被删除时，将显示一个日历。需要明确的是，创建一个新元素并将其添加到 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 元素，所以不要指望高质量的代码:)

我找到了一种方法来实现我想要的，方法是将HTML5拖放代码移动到AngularJS指令中，然后（使用此[从角度外部编译动态模板]作为指导）将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();
});

如果你有兴趣.js你可以在 Git Project/public/controllers/template 中找到完整的代码。

相关文章：