Question

我正在开发一个网络应用程序。我正在使用AngularJS将所有文件动态加载到UI中 1.我有和index.html所有文件将在点击或加载时动态加载。

    //index.html
    <signin button> <signup button> // etc.,
    //on-clicking signin button a SignIn-page will load in the below div

    <div id="bodyview"></div>
    // end of index.html

现在我的登录页面看起来有点像下面的结构

    /*a div where my accordion menu will load when the 
     *below submit button is clicked*/

    <div id="menu"></div>

    //other sign-in-form stuff will follow on...

    //submit button at the end
    <submit button> //only on clicking the submit button the menu will be loaded

现在我的问题是，虽然我能够加载手风琴menu.html文件，但我无法加载它所依赖的css和js文件。我已经调查了大多数stackoverflow讨论和许多其他的..但没有一个对我有用。
任何人都可以帮助确定使用 Angular JS ...加载css和js依赖项的方法吗？
任何帮助表示赞赏。提前致谢

Answer 1

只需编写一个服务即可将CSS和JS文件添加到<head>

这是一个用于动态加载CSS文件的示例服务。您可以轻松修改它以加载JS文件。

https://github.com/Yappli/angular-css-injector

Answer 2

目前我使用angular-css：https://github.com/door3/angular-css Imho，它是目前最好，最灵活的解决方案之一。

Answer 3

我没有采用AngularJS方式，而是尝试使用JQuery加载文件。它对我有用。 You can check this link for reference

Answer 4

app.controller('MyCtrl', function($scope,$compile) {
 $("#my").append( $compile("<script src='my.js'>")($scope) );
});

Answer 5

我用jquery做这样的努力

/** resolve will come inside your route .when() function **/
resolve: {
        theme: function ($route, $q) {
            changeCss($route, $q);
        }
    }

/** This will come just outside your route .when() function, make sure the following function shall be in scope of the route provider **/
    var changeCss = function ($route, $q) {
        var defer = $q.defer();
        // Change the CSS as per the param received
        if ($route.current.params.css != undefined) {
            if ($route.current.params.css === ‘dark’) {
                loadCSS(“assets / css / dark.css”);
                defer.resolve();
            }
            if ($route.current.params.css === ‘light’) {
                loadCSS(“assets / css / light.css”);
                defer.resolve();
            } else {
                defer.resolve();
            }
        }
        return defer.promise;
    }
    var loadCSS = function (href) {
        var cssLink = $(“ < link rel = ’stylesheet’ type = ’text / css’ href = ’”+href + “‘ > ”);
        $(“head”).append(cssLink);
    };

我使用Promise是因为这样可以确保在显示/加载angularjs路由/页面之前先加载css。

Angular JS：动态加载CSS和JS文件

5 个答案: