Angular JS: โหลดไฟล์ CSS และ JS แบบไดนามิก

ฉันกำลังอยู่ระหว่างการพัฒนาเว็บแอป ฉันใช้ 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

ตอนนี้ปัญหาของฉันคือ แม้ว่าฉันจะสามารถโหลดไฟล์ accordion menu.html ได้ แต่ฉันก็ไม่สามารถโหลดไฟล์ css และ js ที่มันขึ้นอยู่กับมันได้ ฉันค้นคว้าเกี่ยวกับ stackoverflow แล้ว แต่ไม่มีใครได้ผลสำหรับฉัน

ใครสามารถช่วยระบุวิธีการโหลดการพึ่งพา css และ js โดยใช้ AngularJS ได้


angularjs angularjs-directive angular-ui angularjs-scope
person Roopa    schedule 17.07.2013    source แหล่งที่มา

คำตอบ (5)


arrow_upward
19
arrow_downward

เพียงเขียนบริการเพื่อเพิ่มไฟล์ CSS และ JS ลงใน <head>

นี่คือบริการตัวอย่างที่ใช้ในการโหลดไฟล์ CSS แบบไดนามิก คุณสามารถแก้ไขได้อย่างง่ายดายเพื่อโหลดไฟล์ JS

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

person rppig    schedule 17.07.2013
comment
สามารถใช้ฉีดไฟล์ JS ได้หรือไม่ - person mulla.azzi; 11.06.2014
comment
เราจะเพิ่มไฟล์ js โดยใช้มันได้อย่างไร? เช่น. ตัวควบคุม - person Manish Prajapati; 30.12.2016
comment
หากฉันทำเช่นนี้ มุมมองจะปรากฏขึ้นก่อนที่จะโหลด CSS... (และบริการที่คุณเชื่อมโยงนั้นเลิกใช้แล้ว) - person El Mac; 03.05.2018

arrow_upward
7
arrow_downward

ขณะนี้ฉันใช้ angular-css: https://github.com/door3/angular-css Imho เป็นหนึ่งในโซลูชั่นที่ดีที่สุดและยืดหยุ่นที่สุดในขณะนี้

person Olga Gnatenko    schedule 13.03.2015

arrow_upward
1
arrow_downward

แทนที่จะใช้วิธี AngularJS ฉันพยายามโหลดไฟล์โดยใช้ JQuery มันได้ผลสำหรับฉัน คุณสามารถตรวจสอบลิงก์นี้เพื่อใช้อ้างอิง

person mulla.azzi    schedule 12.06.2014
comment
และที่นี่ฉันคิดว่าฉันจะไม่เห็นคำตอบว่าทำไมไม่ใช้ jQuery เส้นทาง... - person Gonçalo Vieira; 19.08.2015
comment
OP พยายามโหลดไฟล์โดยใช้ AngularJS การเพิ่มไลบรารีเช่น JQuery เพียงเพื่อโหลดไฟล์ไม่ใช่วิธีแก้ปัญหาที่ดี ซึ่งสามารถทำได้ในจาวาสคริปต์ธรรมดาตามที่อธิบายไว้ที่นี่ - person domino_katrino; 30.11.2015
comment
AngularJS มี jqLite ดังนั้นจึงไม่จำเป็นต้องมีการพึ่งพาเพิ่มเติม: docs.angularjs.org/api/ng/function/ - person Westy92; 20.03.2018

arrow_upward
0
arrow_downward

ฉันใช้ 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

person Abdeali Chandanwala    schedule 04.12.2018

arrow_upward

arrow_downward

person    schedule
comment
คุณไม่ควรทำการจัดการ DOM ในคอนโทรลเลอร์ นั่นเป็นหนึ่งในข้อผิดพลาดเมื่อใช้เชิงมุม - person Ehsan88; 06.10.2016