Question

我需要在相同的Angular（1.5）上导入带有应用程序的外部文件。所以在加载主页面之后，我把按钮用ng-click放在哪里是一个用模块加载外部脚本的函数，加载脚本后，我用fire，$ compile，$ rootScope从主要的fire方法外部方法（loadExternalApp）应用程序。 #testApp位于主页面上。我尝试在这个div中编译我的应用程序。

外部脚本来源：

function loadExternalApp(angular, $compile, $rootScope) {
    angular.module('externalApp', [])
        .component('testComponent', TestComponent);

        var TestAppController = function () {
           this.test = ['test1, test2, test3'];
        };

        var McsTestComponent = {
            controller: [TestAppController],
            template: '<div ng-repeat="value in $ctrl.test">{{value}}</div>'
        };

        angular.element('#testApp')
            .append($compile('<test-component></test-component>')($rootScope));
        $rootScope.$digest();
    }
}

结果是角度工作正常，但没有看到组件和模块（不编译这部分代码）。如果我将主应用程序中的指令添加到组件模板 - 它将编译它。

您知道如何从外部脚本动态注入模块到工作应用程序吗？

编辑：我找到了一种方法来做到这一点。我需要修改主页模块的配置，如下所示：

.config(($controllerProvider, $provide, $compileProvider) => {
    module.service = (name, constructor) => {
        $provide.service(name, constructor);
        return module;
    };

    module.component = (name, constructor) => {
        $compileProvider.component(name, constructor);
        return module;
    };
});

它允许在引导后向模块添加新组件/服务。当然在我的外部脚本中，我需要更改模块名称，我将组件定义为与主页面中相同的名称。

这是一个黑客，所以如果有人找到更好的解决方案，我将不胜感激。

Angular 1.5异步添加和编译外部模块

0 个答案: