是否将在n个多个DOM节点上调用angular.bootstrap实例化n个AngularJS应用程序？

苏季同

2023-03-14

问题内容：

说调用angular.bootstrap将创建一个新的AngularJS实例，以及一个单独的摘要周期，根作用域，注入器等，是否正确？

如果是这样，是否可以嵌套此类应用程序（即在由另一个AngularJS应用程序管理的DOM内的DOM节点上调用引导程序）？（我想不！）

问题答案：

它将创建一个新的Angular
注入器服务实例，该实例负责依赖项注入并控制应用程序生命周期。因此，它也创造了其在应用中使用的服务的新实例（包括来自那些ng模块：$rootScope，$compile，等）。

您可能将其视为应用程序的新实例（模块的集合）。Angular本身（angular对象）未实例化。

该不同的东西angular.bootstrap从angular.injector（后者只是创建一个新的喷射器实例）是它连接的喷射器实例借助于到DOM元素$rootElement的服务。这样，此元素及其子元素与特定的喷射器实例相关联（可以使用获取angular.element(someElement).injector()）。

无法在自举的元素（或其子元素）上引导应用程序，Angular
会保护它免受混乱。

但是，Angular并不是真正的傻瓜，可以通过反向引导应用程序来完成：

angular.bootstrap(nestedAppElement, ['nestedApp']);
angular.bootstrap(appElement, ['app']);

看来我们终于搞砸了。没有什么可以阻止app在中编译自己的指令<nested-app- container>，并且它使用自己的注入器和作用域（这里是app根作用域）来编译它们，而不是属于当前DOM元素的作用域和注入器。如果嵌套的应用程序将被某些父应用程序指令重新编译，那么事情将变得更加混乱。

绕过用于双重引导的Angular防呆旁路非常简单。由于Angular使用继承的数据以分层方式获取元素的注入器（当element.data('$injector')在自举元素上未定义时，会自动从父级中检索它），因此必须将其覆盖：

angular.module('app').directive('nestedAppContainer', function () {
  return {
    compile: function (element) {
      element.data('$injector', null);
    }
  };
});

现在，可以以任何顺序安全地引导应用程序了。但是app远离的问题<nested- app-container>仍然存在。可以通过将标记nestedAppContainer指令作为终端来解决

angular.module('app').directive('nestedAppContainer', function () {
  return {
    priority: 100000,
    terminal: true,
    ...
  };
});

或通过将嵌套应用放入影子DOM中

nestedAppContainer = nestedAppContainer.createShadowRoot();

它专门用于隔离DOM部件（Chrome本身支持并在其他浏览器中多填充）。

TL; DR：Angular中嵌套应用程序的解决方案

如此处所示：

  <body>
    <div app-dir>
      <nested-app-container></nested-app-container>
    </div>
  </body>

和

var appElement = document.querySelector('body');

var nestedAppContainer = document.querySelector('nested-app-container');
// nestedAppContainer = nestedAppContainer.createShadowRoot();

var nestedAppElement = angular.element('<nested-app>')[0];
angular.element(nestedAppContainer).append(nestedAppElement);

angular.element(nestedAppElement)
  .append('<div app-dir>(app-dir)</div>')
  .append('<div nested-app-dir>(nested-app-dir)</div>');

angular.element().ready(function () {
  angular.bootstrap(appElement, ['app']);
  angular.bootstrap(nestedAppElement, ['nestedApp']);
});

angular.module('nestedApp', []).directive('nestedAppDir', function () {
  return {
    controller: function ($scope) {
      $scope.app = 'nested app';
    },
    compile: function (element) {
      element.prepend('nested app is "{{ app }}"');
    }
  }
});

angular.module('app', []).directive('appDir', function () {
  return {
    controller: function ($scope) {
      $scope.app = 'app';
    },
    compile: function (element) {
      element.prepend('app is "{{ app }}"');
    }
  }
});

angular.module('app').directive('nestedAppContainer', function () {
  return {
    priority: 100000,
    // 'terminal' is redundant with nestedAppContainer.createShadowRoot()
    terminal: true,
    compile: function (element) {
      // element injector is not 'undefined' anymore,
      // so it won't be inherited from parent elements
      element.data('$injector', null);
    }
  };
});

虽然看起来很整洁，但请小心进行。就像其他任何利用未公开文档的黑客一样，该黑客可能掩盖了不利的副作用或被新的框架版本所破坏。

可能需要黑客攻击的案例并不多。大多数时候，如果您有与框架打交道的冲动，那就错了。

是否将在n个多个DOM节点上调用angular.bootstrap实例化n个AngularJS应用程序？

TL; DR：Angular中嵌套应用程序的解决方案

相关阅读

相关文章

相关问答

相关工具

相关文档