Question

我在Angular中有一个应用程序会随着时间的推移变大，我不希望用户在index.html内预先加载所有控制器。为了克服一些扩展问题，我想在用户访问给定视图时为给定视图加载控制器。我不想在我的router.js中静态定义控制器和视图，而是动态地获取它们。我的router.js看起来如下：

var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'views/home.html'
        })
        .when('/portfolio/:page', {
            controller: 'TopLevelController',
            templateUrl: function(params){ return 'views/portfolio/'+params.page+'.html';}
        })
        .otherwise({
            redirectTo: '/'
        });
});

portfolio文件夹中会有大量视图，每个视图都有自己的控制器。由于可视化和指令的使用，每个视图都非常不同。

我认为可以帮助的一个解决方案是link，我有一个顶级控制器，然后通过这个控制器获取所需的JS。

我的顶级控制器看起来像：

app.controller('TopLevelController', ['$scope', '$route', '$controller', function($scope, $route, $controller) {    
    $scope.loadScript = function(url, type, charset) {
        if (type===undefined) type = 'text/javascript';
        if (url) {
            var script = document.querySelector("script[src*='"+url+"']");
            if (!script) {
                var heads = document.getElementsByTagName("head");
                if (heads && heads.length) {
                    var head = heads[0];
                    if (head) {
                        script = document.createElement('script');
                        script.setAttribute('src', url);
                        script.setAttribute('type', type);
                        if (charset) script.setAttribute('charset', charset);
                        head.appendChild(script);
                    }
                }
            }
            return script;
        }
    };

    var controllerToLoad = $route.current.params.page+'Controller.js';

    $scope.loadScript('js/controllers/portfolio/'+controllerToLoad, 'text/javascript', 'utf-8');

}]);

侧面投资组合中的示例视图是＆＃39; PDB.html＆＃39;看起来如下：

<html>
<body ng-controller="PDBController">
{{test}}
Static Text
</body>
</html>

PDBController看起来像：

app.controller('PDBController', ['$scope', '$http', function($scope, $http) {
    $scope.test = "inside PDBController";
    console.log("i exist");
}]);

但是当我访问然后查看所有我得到的是：

我没有在PDBController＆＃34;中看到文字＆＃34;我也看不到＆＃34;我存在＆＃34;在控制台输出中。谁能指出我出错的地方或提供解决方案？

基于视图的负载控制器

0 个答案: