Angular JS: Memuat file CSS dan JS secara dinamis

Saya sedang mengembangkan aplikasi web. Saya menggunakan AngularJS untuk memuat semua file secara dinamis ke UI.

Saya memiliki file index.html di mana semua file akan dimuat secara dinamis saat diklik atau saat dimuat.

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

Sekarang halaman masuk saya terlihat seperti struktur di bawah ini

    /*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

Sekarang masalah saya adalah, meskipun saya dapat memuat file menu.html akordeon, saya tidak dapat memuat file css dan js yang menjadi sandarannya. Saya telah meneliti tentang stackoverflow tetapi tidak ada yang berhasil untuk saya.

Adakah yang bisa membantu menentukan cara memuat dependensi css dan js menggunakan AngularJS


angularjs angularjs-directive angular-ui angularjs-scope
person Roopa    schedule 17.07.2013    source sumber

Jawaban (5)


arrow_upward
19
arrow_downward

Cukup tulis layanan untuk menambahkan file CSS dan JS ke <head>

Berikut adalah contoh layanan yang digunakan untuk memuat file CSS secara dinamis. Anda dapat memodifikasinya dengan mudah untuk memuat file JS.

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

person rppig    schedule 17.07.2013
comment
bisakah ini juga digunakan untuk menyuntikkan file JS? - person mulla.azzi; 11.06.2014
comment
Bagaimana kita bisa menambahkan file js menggunakannya? misalnya pengontrol. - person Manish Prajapati; 30.12.2016
comment
Jika saya melakukan ini, tampilan ditampilkan sebelum CSS dimuat... (dan layanan yang Anda tautkan tidak digunakan lagi) - person El Mac; 03.05.2018

arrow_upward
7
arrow_downward

Saat ini saya menggunakan sudut-css: https://github.com/door3/angular-css Imho , ini adalah salah satu solusi terbaik dan paling fleksibel saat ini.

person Olga Gnatenko    schedule 13.03.2015

arrow_upward
1
arrow_downward

Daripada menggunakan cara AngularJS, saya mencoba memuat file menggunakan JQuery. Itu berhasil untuk saya. Anda dapat memeriksa tautan ini untuk referensi

person mulla.azzi    schedule 12.06.2014
comment
dan di sini saya pikir saya tidak akan melihat jawaban mengapa tidak menggunakan jQuery? rute... - person Gonçalo Vieira; 19.08.2015
comment
OP sedang mencoba memuat file menggunakan AngularJS. Menambahkan perpustakaan seperti JQuery hanya untuk memuat file bukanlah solusi yang baik. Hal ini dapat dilakukan dalam javascript biasa seperti yang dijelaskan di sini - person domino_katrino; 30.11.2015
comment
AngularJS menyertakan jqLite, jadi ketergantungan tambahan mungkin tidak diperlukan: docs.angularjs.org/api/ng/function/ - person Westy92; 20.03.2018

arrow_upward
0
arrow_downward

Saya menggunakan jquery untuk melakukan kerja keras seperti ini

/** 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);
    };

Saya telah menggunakan Promise karena ini akan memastikan untuk memuat css sebelum menampilkan/memuat rute/halaman sudutjs.

person Abdeali Chandanwala    schedule 04.12.2018

arrow_upward

arrow_downward

person    schedule
comment
Anda tidak boleh melakukan manipulasi DOM di pengontrol. Itulah salah satu kendala saat menggunakan sudut - person Ehsan88; 06.10.2016