javascript - 页面加载后动态注入(inject)新的 Angular JS Controller 和 html

Question

我一直在开发一个 Angular JS 网站，它从 webservice/api 获取数据。一个 API 返回 html 和 Angular JS 代码，以动态添加 Controller 或我们想要添加的任何新的 Angular 组件。该字符串将出现在 api 响应中

<div id="homecontainer" class="flex-center p-page" loader style="overflow:hidden;">
    <div class="column-1">
        <div class="grid m-0 col-xs-12">
            <div ng-repeat="Widget in V3Widgets track by $index" class="grid-item">
                <div class="grid-sizer"></div>
             {{Widget}}
            </div>


        </div>
        <div ng-controller="WelcomeController">
            {{greeting}}
        </div>
        <script>
            var app = angular.module('demo', [])
                //RestService is Other Module Which is Already Working fine 
            .controller('WelcomeController', function ($scope,RestService) {
                $scope.greeting = 'Welcome!';
            });
            angular.bootstrap(document, ['demo']);
        </script>
    </div>
</div>

现在我有一个指令将此字符串绑定(bind)到页面

<renderdynamicwidgethtml ng-if="Widget.Id==null && Widget.Html!=null" html="Widget.Html"/>

指令的js

.directive('renderdynamicwidgethtml', ['$compile', function ($compile) {
    return function (scope, element, attrs) {
        scope.$watch(
          function (scope) {
              return scope.$eval(attrs.html);
          },
          function (value) {
              element.html(value);
              $compile(element.contents())(scope);
          }
       );
    };
}])

scope.$eval 应该将字符串转换为 Angular 分量，但由于此错误而失败。

[ng:btstrpd] http://errors.angularjs.org/1.3.17/ng/btstrpd?p0=document

Answer 1

Since Angular 1.5, there's a new angular.component tool. This answer uses the word Component to make a reference to all the possible tools Angular provides (such as directives, filters, etc), including angular.component.

首先让我从 AngularJS 设置一切的方式开始:

1. 加载 javascript 文件后，您可以看到所有以 angular.module、angular.controller、angular.directive 开头的 Angular 代码 等。所有这些都接收一个函数作为参数(除了 angular.module，它接收名称和依赖项列表)。此时，这些组件还没有被创建，只是注册了。

2. 一旦 Angular 注册了所有模块和组件，就可以成为 bootstrapped ，可以使用 ng-app 指令，也可以使用 angular.bootstrap 手动进行。两种方法都接收一个字符串作为参数，它是根模块的名称。使用该根模块，Angular 深入查看其依赖项(可以将其视为依赖项树)，并开始从其叶子(没有依赖项的模块)加载组件，直到根模块的组件。

3. 对于每个模块，Angular 按照一定的顺序构建它们，从常量开始，然后是提供者，然后按照注册的顺序运行配置 block ，然后加载值，然后是工厂/服务，然后是指令，最后运行 block 按照注册的顺序排列(我不完全确定顺序，我建议您仔细检查)

4. 最后，一切设置完毕后，它会“密封”应用程序，因此无法注册其他任何内容。

该错误意味着您正在引导应用程序两次。当使用 ng-app 指令并调用 angular.bootstrap，或者只是多次调用 angular.bootstrap 时，可能会发生这种情况。

正如文档中手动初始化部分所述:

You should call angular.bootstrap() after you've loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.

因此，为了动态加载新 Controller ，您应该在引导过程之前注册它们。您可以通过从 API 检索所需的数据(由于尚未设置 Angular，因此需要任何其他工具，如 JQuery)，使用 JavaScript 的标准 eval 函数执行代码(执行这在请求的 promise 中)，然后使用 angular.bootstrap 手动引导 AngularJS。

为此，您使用 eval 执行的代码应该是纯 JavaScript，我建议通过更改 API 的响应(如果可能)或在获取后以编程方式将其与 HTML 分离。响应。

此外，如果您需要多次执行此操作，请确保使用 eval 执行的代码在注册您需要的所有组件之前不会引导 Angular。