2013-07-17 18 views
14

Jestem w trakcie opracowywania aplikacji internetowej. Używam AngularJS do dynamicznego ładowania wszystkich plików do interfejsu użytkownika.
1. Mam i index.html, na które wszystkie pliki będą ładowane dynamicznie po kliknięciu lub załadowaniu.Angular JS: dynamicznie ładuj pliki CSS i JS

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

Teraz moje strony logowania wygląda nieco jak poniżej struktury

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

Teraz mój problem jest, choć jestem w stanie załadować plik akordeon menu.html, nie jestem w stanie załadować pliki css i js, od których zależy. Zajrzałem do większości dyskusji na temat stackoverflow i wielu innych ... ale nikt nie pracował dla mnie.
Czy ktokolwiek może pomóc w określeniu sposobu ładowania zależności css i js za pomocą Angular JS ...?
Każda pomoc jest doceniana. Dzięki z góry

Odpowiedz

18

Wystarczy napisać obsługę CSS i JS dodać pliki do <head>

Oto przykład usługa, która służy do dynamicznie ładować CSS files.You można je łatwo modyfikować, aby załadować pliki JS.

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

+2

może to być również używane do wstrzykiwania plików JS? –

+0

To może nie działać w IE7/8. Zobacz http://stackoverflow.com/a/4754995/634204 –

+0

Jak możemy dodać pliki js, używając go? na przykład kontrolerów. –

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

Tak! to jest niewłaściwy sposób. Zobacz http://docs.angularjs.org/guide/directive –

+0

Nie powinieneś wykonywać manipulacji DOM w kontrolerach. To jedna z pułapek przy użyciu kątowego – ehsan88

1

Zamiast iść przez angularjs sposób, próbowałem załadować pliki przy użyciu jQuery. To zadziałało dla mnie. You can check this link for reference

+1

i tutaj myślałem, że nie zobaczę odpowiedzi, która brzmiała "dlaczego nie używać jQuery?" route ... –

+0

OP próbował załadować plik za pomocą AngularJS. Dodanie biblioteki takiej jak JQuery do załadowania plików nie jest dobrym rozwiązaniem. Można to zrobić w prostym javascriptie, tak jak to opisano [tutaj] (http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_withJavaScript) –