Angular JS: загрузка файлов CSS и JS динамически

Я нахожусь в процессе разработки веб-приложения. Я использую AngularJS для загрузки всех файлов динамически в пользовательский интерфейс.

У меня есть файл 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

Теперь моя проблема в том, что, хотя я могу загрузить файл accordion menu.html, я не могу загрузить файлы css и js, от которых он зависит. Я исследовал stackoverflow, но никто не работал для меня.

Кто-нибудь может помочь в определении способа загрузки зависимостей css и js с помощью AngularJS

Ответы

Ответ 1

Просто напишите службу, чтобы добавить CSS и JS файлы в <head>

Вот пример службы, которая используется для динамической загрузки файлов CSS. Вы можете легко ее модифицировать для загрузки файлов JS.

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

Ответ 2

В настоящее время я использую angular -css: https://github.com/door3/angular-css Imho, это одно из лучших и самых гибких решений на данный момент.

Ответ 4

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

Ответ 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, потому что это обязательно загрузит css до того, как он покажет/загрузит маршрут/страницу angularjs.