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

Question

我正在开发一个网络应用程序。我正在使用 AngularJS 将所​​有文件动态加载到 UI 中。

我有一个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，但没有一个对我有用。

任何人都可以帮助确定使用 AngularJS 加载 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 恕我直言，这是目前最好、最灵活的解决方案之一。

Answer 3

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

Answer 4

我使用 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。

Answer 5

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