2013-07-17 16 views
14

Tôi đang phát triển một ứng dụng web. Tôi đang sử dụng AngularJS để tải tất cả các tệp động vào giao diện người dùng.
1. tôi có và index.html trên đó tất cả các tệp sẽ được tải động trên nhấp chuột hoặc khi tải.JS góc: Tải các tệp CSS và JS động

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

Bây giờ trang đăng nhập của tôi trông hơi giống như cấu trúc bên dưới

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

Bây giờ vấn đề của tôi là, mặc dù tôi có thể tải các tập tin accordion menu.html, tôi không thể để tải các tập tin css và js nó phụ thuộc vào. Tôi đã xem xét hầu hết các cuộc thảo luận stackoverflow và nhiều người khác .. nhưng không ai làm việc cho tôi.
Ai đó có thể giúp bạn trong việc xác định cách tải phụ thuộc css và js bằng cách sử dụng Angular JS ...?
Bất kỳ Trợ giúp nào được đánh giá cao. Cảm ơn trước

Trả lời

18

Chỉ cần viết một dịch vụ để thêm các tập tin CSS và JS đến <head>

Dưới đây là một dịch vụ ví dụ được sử dụng để tự động load CSS files.You có thể sửa đổi nó một cách dễ dàng để tải các file JS.

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

+2

điều này có thể được sử dụng để tiêm các tệp JS không? –

+0

Điều này có thể không hoạt động trong IE7/8. Xem http://stackoverflow.com/a/4754995/634204 –

+0

Cách chúng tôi có thể thêm tệp js bằng cách sử dụng nó? ví dụ. bộ điều khiển. –

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

Có! đây là cách sai. Xem http://docs.angularjs.org/guide/directive –

+0

Bạn không nên thực hiện thao tác DOM trong bộ điều khiển. Đó là một trong những cạm bẫy khi sử dụng góc cạnh – ehsan88

1

Thay vì đi bằng AngularJS bằng cách nào, tôi đã cố gắng để tải các tập tin sử dụng JQuery. Nó làm việc cho tôi. You can check this link for reference

+1

và ở đây tôi nghĩ rằng tôi sẽ không thấy câu trả lời cho rằng "tại sao không sử dụng jQuery?" route ... –

+0

OP đang cố tải tệp bằng AngularJS. Thêm thư viện như JQuery chỉ để tải các tập tin không phải là một giải pháp tốt. Điều này có thể được thực hiện bằng javascript đơn giản như được mô tả [ở đây] (http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript) –