Question

假设我有一个应用程序，我不知道它的引用名称或它的定义。

假设我有另一个我创建的模块，（导航模块）我想在现有的角度应用程序中注入此导航模块，以便它可以正常运行。

<html ng-app="appA">
  <body>
    <!-- navController exists inside another app -->
    <nav id="testElement" controller="navController"></nav>
  </body>
</html>

示例：

$(document).ready(function() {
    var nav = document.getElementById('testElement');
    if (!angular.element(nav).length) return;
    var appElement = angular.element('[ng-app]');
    console.log('appname', appElement.attr('ng-app'));
    var appToInject;
    if (!appElement.length) {
        // Manually run the new app from within js without a ng-app attrib
        appToInject = angular.module('CustomModuleForNavigation', []);
        angular.bootstrap(nav, ['CustomModuleForNavigation']);
    } else {
        appToInject = angular.module(appElement.attr('ng-app'),     []);
    }
    if (angular.isUndefined(appToInject)) return;
    console.log('winning?', appToInject)

    appToInject.controller('navController', function($scope) {
        console.log('extending app in new ctrl!', $scope);
    });

});

Answer 1

如果存在现有的应用模块定义，但您想要向应用模块添加其他依赖项，则可以通过这种方式完成。

var existingModule = angular.module('appModuleName');
existingModule.requires.push('additionaldependency');

appModuleName可以通过索引的ng-app属性找到。确保此脚本在现有模块定义脚本之后运行。此外，在加载此脚本之前，还需要加载“additionaldependency”所需的脚本。

Answer 2

我已经通过将依赖项注入现有应用程序，或者使用角度引导程序手动运行我自己来解决这个问题。

var appElement = $('[ng-app]').first();
function angularJsModuleMerger(elementToBindScope, dependencies) {
    var scopeElement = document.getElementById(elementToBindScope);
    // Dependencies should contain our mobile scopeElement app only, the mobile app should contain it's dependencies.
    if (!angular.element(scopeElement).length) return;
    // If There is an existing angular app, inject our app into it, else, create a new app with our dependencies.
    var hasAngularApp = appElement.length;
    var appToInject;
    if (!hasAngularApp) {
        appToInject = angular.module('appForModularInjection', dependencies);
        // Manually run this app, so that we're not interrupting the current app.
    } else {
        // There is an existing app, so let's get it by it's name
        appToInject = angular.module(appElement.attr('ng-app'));
        // Inject our dependencies to the existing app, IF they don't alreay have these dependencies. 
        // Dependencies must also be loaded previously.
        var currentDependencies = appToInject.requires;
        var newDependencies = currentDependencies.concat(dependencies);
        appToInject.requires = newDependencies;
        appToInject.run(function($rootScope, $compile) {
            $compile(angular.element(scopeElement).contents())($rootScope);
        });
    }
    // If we still don't have an app, well, voodoo.
    if (angular.isUndefined(appToInject)) return;
    // console.log('ok');
    // We must run the app after all the declarations above for both existing and non existing apps.
    if (!hasAngularApp) angular.bootstrap(scopeElement, ['appForModularInjection']);
}

这将自我注入现有应用程序，手动定义应用程序并将其正确绑定到相关元素。

范围/层次结构无关紧要。

你能将依赖注入现有的角度应用吗？

2 个答案: