Question

我想做这样的事情（但显然不是这样，因为这个功能不起作用）

angular.bootstrap( $("#myelement"), ['myModule'], {foo: bar} );

我想传递配置对象，因为我们可能希望在页面上有不止一个应用程序实例，具有不同的设置等等。我能想到的只是丑陋的变通方法。我认为最好的办法是覆盖我自己制作的“选项”服务，但我仍然无法找到正确的方法（简洁地说）。

提前致谢！

Answer 1

你怎么样尝试这样的事情：

angular.module('configFoo', []).run(function() {});

angular.module('configBar', []).run(function() {});

angular.bootstrap(myEl, ['myModule', 'configFoo']);

angular.bootstrap(myOtherEl, ['myModule', 'configBar']);

所有可用模块方法的

http://docs.angularjs.org/api/angular.Module（您可能只对.run（）和.config（）感兴趣）

Answer 2

这是一个有效的代码： http://jsfiddle.net/x060aph7/

angular.module('myModule', [])
    .controller('myController', function($scope,myConfig) {            
        $scope.name = 'inst '+myConfig.foo;
    })
;

var aConfig = [{foo:1},{foo:2},{foo:3}];
aConfig.forEach(function(config){
    angular.module('fooConfig',[]).value('myConfig', config);
    angular.bootstrap(getDiv(), ['myModule','fooConfig']);
});

function getDiv(){
    var mDiv = document.createElement('div');
    mDiv.setAttribute('ng-controller','myController');
    mDiv.innerHTML = '<span>{{name}}</span>';
    document.body.appendChild(mDiv);
    return mDiv;
}

Answer 3

以下示例帮助我们将窗口小部件引导到页面。首先使用一些jQuery制作div，以便小部件加载带有ng-include的模板，它由WidgetLogoController控制。接下来，创建一个模块WidgetConfig，用于保存小部件的配置。

$('#pageWidget').html(`<ng-include src="'/dist/templates/widgetLogo.html'"></ng-include>`)
    .attr('ng-controller','WidgetLogoController');

    var widgetConfig = {
        'widgetId': data.pageWidgetId,
        'areaId': data.area,
        'pageId': data.pageId
    };
    angular.module('WidgetConfig', []).value('WidgetConfig', widgetConfig);
    angular.bootstrap(document.getElementById('pageWidget'), ['Widget', 'WidgetConfig']);

Widget模块包含WidgetConfig配置，但在CONFIG中也有自己的位置：

(function (window, angular) {

    'use strict';

    window.app = angular.module('Widget', ['ngFileUpload', 'WidgetConfig'])

    .constant('CONFIG', {
        BASE_URL: 'http://osage.brandportal.com/'
    });

})(window, angular);

WidgetController可以访问CONFIG和WidgetConfig。

(function (app) {

    'use strict';

    app.controller('WidgetLogoController', ['CONFIG', 'WidgetConfig', 
        function(CONFIG, WidgetConfig){

            console.log('---WidgetLogoController');
            console.log('CONFIG', CONFIG);
            console.log('WidgetConfig', WidgetConfig);

        }]);

}(app));

Answer 4

怎么样：

加载配置而不是加载角度：

angular.element(document).ready(() => {
$.get('config', // url to my configuration 
       {},
       function (data) {
           window.config = data;
           angular.bootstrap(document, ['myApp']);
        }
    );
});

访问配置：

angular.module('myApp').run(myAppRun);

function myAppRun($window) {
    $window.config; // here I have config
}

如何在加载时配置AngularJS应用程序？

4 个答案: