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

Angular: Adding custom script/css to partials via controller

本文关键字：自定义 添加 脚本 css partials 控制器 Angular      更新时间：2023-09-26

我试图通过控制器将自定义页面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;
                        });
                    }
                });
            }
        };
    }
]);
<

应用程序控制器/strong> 

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">


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

我想知道如何从输出中删除ng指令，以及如何在文档之前加载js。准备好，这样我就不会得到错误。

你似乎在寻找一种通过异步加载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/

相关文章：