Question

我的应用程序有一个主模块“myModul”和一个主控制器“main”，它绑定在body标签上。

<body ng-controller="main">

以下是我的模块和控制器的代码：

var app = angular.module('myModul', ['ngTouch','widgetContainer']);

angular.element(document).ready(function() {
    angular.bootstrap(document, ['myModul']);
});

app.controller('main', ['$scope', '$http', '$compile', 'loadApps', function($scope, $http, $compile, loadApps) {
    /***** Load all Apps information *****/
    $scope.apps = loadApps.get();
    $scope.apps.then(
        function(result) {
            $scope.apps = result.apps;
        }
    );

    $scope.activateApp = function(obj) {
        if (jQuery('#app' + obj + 'Script').length == 0) {
            jQuery('head').append('<script id="app' + obj + 'Script" type="text/javascript" src="/apps/' + obj + '/scripts/' + obj + '.js"></script>');
        }
        if (jQuery('#app' + obj + 'CSS').length == 0) {
           jQuery('head').append('<link id="app' + obj + 'CSS" rel="stylesheet" href="/apps/' + obj + '/stylesheets/' + obj + '.css">');
        }

        $http({
            method: 'GET',
            url: '/appMainTemplate',
            params: {name: obj}
        }).success(function(data, status, headers, config) {
            angular.element('[area="app"]:visible').empty().html($compile(data)($scope));
        });
    } 
}]);

点击按钮即可触发“activateApp”功能。此请求的My Node后端非常简单：

app.get('/appMainTemplate', function(req, res) {
    res.sendFile(__dirname + '/apps/' + req.query.name + '/templates/index.html');
});

现在我的问题

我使用以下行附加发送模板：

angular.element('[area="app"]:visible').empty().html($compile(data)($scope));

如何在此模板中使用控制器，指令等定义新模块并使用它？我将此模板简化为

<script type="text/javascript">

    app.controller('example123', ['$scope', function($scope) {
        $scope.test = 'hello';
    }]);


</script>

<div ng-controller="example123">
    <div>  
        {{test}} <----
    </div>
</div>

我想创建一个新模块，我将添加到myModul的依赖项中。但即使这个小控制器example123也行不通。我收到这个错误：

参数'example123'不是函数，未定义...

我尝试了不同的解决方案，我在这里以及其他页面上阅读：

http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm

但没有任何效果......事实是，我也不完全理解解决方案。

Mayby有人可以修改我的代码或者可以给出一个小解释该做什么？

在应用程序引导后加载AngularJS组件

0 个答案: