Question

我正在尝试通过控制器向我的部分添加自定义页面CSS / JS，我已经为它创建了一个自定义指令但是当我使用它加载CSS时它会获得我不想要的不必要的参数，当我使用它加载JS我的JS没有加载正确的时间（意味着在页面中写入的init函数之前被调用，留下错误）

指令

app.directive('head', ['$rootScope','$compile',
    function($rootScope, $compile){
        return {
            restrict: 'E',
            link: function(scope, elem){
                var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
                elem.append($compile(html)(scope));
                scope.routeStyles = {};
                $rootScope.$on('$routeChangeStart', function (e, next, current) {
                    if(current && current.$$route && current.$$route.css){
                        if(!Array.isArray(current.$$route.css)){
                            current.$$route.css = [current.$$route.css];
                        }
                        angular.forEach(current.$$route.css, function(sheet){
                            delete scope.routeStyles[sheet];
                        });
                    }
                    if(next && next.$$route && next.$$route.css){
                        if(!Array.isArray(next.$$route.css)){
                            next.$$route.css = [next.$$route.css];
                        }
                        angular.forEach(next.$$route.css, function(sheet){
                            scope.routeStyles[sheet] = sheet;
                        });
                    }
                });
            }
        };
    }
]);

APP CONTROLLER

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/some/route/1', {
            templateUrl: 'partials/partial1.html', 
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        })
        .when('/some/route/2', {
            templateUrl: 'partials/partial2.html',
            controller: 'Partial2Ctrl',
            css: ['css/partial2_1.css','css/partial2_2.css']
        })
}]);

输出我

CSS

<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="css/createtroll.css" class="ng-scope" href="css/partial2.css">

HTML 的

<script ng-repeat="(routeCtrl, scriptUrl) in routeScript" ng-src="js/page.css" class="ng-scope" src="css/scroll.js"></script>

我想知道如何从输出中删除ng-directives以及如何在document.ready之前加载js以便我不会收到错误。非常感谢任何帮助。

Answer 1

似乎您正在寻找一种通过异步加载JS和CSS文件来延迟加载AngularJS应用程序某些方面的方法。

您无法使用控制器/指令来加载文件，因为您的应用已经被自助了。

您需要某种文件/模块加载器，例如您可以使用RequireJS - JavaScript文件和模块加载器。已经有很多RequireJS和AngularJS的例子和实现。

示例：

require.config({ baseUrl: "js", paths: { 'angular': '.../angular.min', 'angular-route': '.../angular-route.min', 'angularAMD': '.../angularAMD.min' }, shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] }, deps: ['app'] });

<强>参考：

http://marcoslin.github.io/angularAMD/#/home

http://www.startersquad.com/blog/angularjs-requirejs/

http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm

http://requirejs.org/

Angular：通过控制器向partials添加自定义脚本/ css

1 个答案: