Html AngularJS动态添加到页面

我们在电子浏览器中有一个AngularJS SP应用程序（智能镜像），它具有用户可创建的扩展

这些扩展是使用角度指令的html小片段 并使用控制器和服务

要安装扩展，必须编辑主页并插入控制器和服务功能的脚本标记，以及HTML片段的

硬编码这个单页应用程序工作得很好

但是我想在这个应用程序（开源）中添加动态加载这些元素的功能

将标记添加到dom中会起作用，但处理不正确。 HTML是在脚本（来自插入的标记）运行之前处理的，当ng include插入HTML片段时，控制器还没有定义

车身（在硬编码位置的延伸部分被注释掉）

日历扩展服务（由控制器使用，在此讨论中缩短）

因此，想要添加扩展名的用户必须创建这些文件， 和编辑主页HTML并插入它们

<div ng-include src="filename.html"></div>

在正确的位置，然后添加

<script src="filename.service" >

及

在正确的位置和顺序，需要在控制器之前完成服务， 当控制器使用服务时

无论如何，添加代码以定位所有扩展并在各自的位置将元素动态插入dom是很容易的。。。但是

在硬编码中，脚本添加在主体中的html之后

因此，我添加了一个新脚本（在加载页面时进行处理），该脚本定位并插入所有元素，以便在正确的位置支持扩展

然后脚本结束了。。。。（硬编码HTML中的最后一个）和HTML指令已被处理，但动态添加的脚本尚未加载或处理，因此找不到控制器

我可以创建一个包含所有这些信息的临时HTML文件并加载它，而不是处理动态加载，但我认为最好解决这个问题

我曾尝试创建自己的angular指令并在中编译，但陷入了循环

<divinc src="filename.service"></divinc>

插入的div是正确的，作为divinc指令的子级

angular.module('SmartMirror')
.directive("divincl", ["$compile" ,function($compile){
      return {
        priority: 100, 
        terminal: true,
        compile: function(scope, element, attrs) {
                var html =  "<div ng-include=\"" + element['incl']+ "\" onload='function(){console.log(\'html loaded\')}'></div>"

                var templateGoesHere = angular.element(document.getElementById(element['id']));
                templateGoesHere.html(html);
                //document.body.innerHTML='';
               var v= $compile(templateGoesHere);
                //scope.$apply();
              return function linkFn(scope) {
                 v(scope) // Link compiled element to scope
              }
        }
      }
}]);

angular.module（'SmartMirror'））
.directive（“divincl”、[“$compile”、函数（$compile）{
返回{
优先：100，
终端：是的，
编译：函数（范围、元素、属性）{
var html=“”
var templategoesher=angular.element（document.getElementById（element['id']）；
html（html）；
//document.body.innerHTML=''；
var v=$compile（templategoesere）；
//作用域：$apply（）；
返回函数linkFn（范围）{
v（scope）//将编译的元素链接到scope
}
}
}
}]);

---

关于如何解决这个问题的建议。。感谢

为了使angularjs 1.7应用程序动态加载扩展，有两种方法：

• 要么使用“嵌套angularjs应用程序”，这显然是angularjs的高级用法，需要您在两个angularjs应用程序之间进行通信，要么使用$scope.$apply通知其他应用程序进行更新，等等
• 或者，在生成包含应用程序的html页面时，不要在前端动态加载它们，而是在后端动态加载它们。尝试从一开始就列出所有扩展名

我建议您也不要使用

ng include

，也不要试图在应用程序的指令中添加

首先，您需要重新理解angularjs应用程序是如何启动的

• 加载主应用程序时，会有一个脚本，其中包含

  angular.module

  ，

  angular.directive

  ，

  angular.value

  ，

  angular.config

  ，

  angular.run

  。。。有人打电话。这是声明步骤
• 如果您声明一个模块

  MyApp

  ，并且在html中有一个带有

  ng app=“MyApp”

  的DOM元素，angularjs将自动在此DOM元素上运行

  angular.bootstrap（）

  ，以便启动

  MyApp

  。应用程序的执行从这里开始。您不能再在模块

  MyApp

  中声明任何内容

其次，我认为模板中的

代码已经被angular清理和删除了。另外，即使您执行了代码，由于

声明步骤

已经完成，您不应该创建新的指令或注册新的服务，它也不会工作

一个好方法是，当加载插件时，您：

• 从一开始就加载插件的脚本，它必须声明一个新模块，如

  MyPlugin1

• 在包含插件的指令中，输入我发送给您的链接的代码，这样就可以插入子应用程序。最后，在指令的模板中会有一个

• 然后在该节点上调用

  angular.bootstrap

  ，这将使启动子应用程序成为可能

如果执行此操作，则可以运行子应用程序，但没有传递参数。为了传递它的参数，您可以将模块的代码

MyPlugin1

放入函数中，以创建应用程序工厂。然后使用

app.value（'param1'，parameter1）

初始化应用程序

例如：

function declarePlugin1(myParam1, myParam2) {
  var app = angular.module('MyPlugin1', []);
  // app.directive();

  app.value('myParam1', myParam1);
  app.value('myParam2', myParam2);
}

在指令调用中

declarePlugin1（“test”，42）

，它将用初始化值声明应用程序

MyPlugin1

，然后

angular.bootstrap

通知angularjs启动此应用程序

---

您也可以传递回调，以便在两个应用程序之间进行通信。

以便生成angularjs 1.7应用程序加载生成器

<script src="filename.service" >

<script src="filename.controller">

<divinc src="filename.service"></divinc>

angular.module('SmartMirror')
.directive("divincl", ["$compile" ,function($compile){
      return {
        priority: 100, 
        terminal: true,
        compile: function(scope, element, attrs) {
                var html =  "<div ng-include=\"" + element['incl']+ "\" onload='function(){console.log(\'html loaded\')}'></div>"

                var templateGoesHere = angular.element(document.getElementById(element['id']));
                templateGoesHere.html(html);
                //document.body.innerHTML='';
               var v= $compile(templateGoesHere);
                //scope.$apply();
              return function linkFn(scope) {
                 v(scope) // Link compiled element to scope
              }
        }
      }
}]);

function declarePlugin1(myParam1, myParam2) {
  var app = angular.module('MyPlugin1', []);
  // app.directive();

  app.value('myParam1', myParam1);
  app.value('myParam2', myParam2);
}