web-dev-qa-db-ja.com

Angular JS：CSSおよびJSファイルを動的にロードする

Webアプリの開発中です。すべてのファイルをUIに動的にロードするために、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

今、私の問題は、アコーディオンmenu.htmlファイルをロードすることはできますが、依存しているcssファイルとjsファイルをロードできないことです。私はstackoverflowについて研究しましたが、私のために働いたものはありませんでした。

AngularJSを使用してcssおよびjsの依存関係をロードする方法を決定するのに誰でも助けてください

angularjsangularjs-directiveangularjs-scopeangular-ui
14
Roopa

CSSとJSファイルを<head>に追加するサービスを書くだけです

以下は、CSSファイルを動的にロードするために使用されるサービスの例です。JSファイルをロードするように簡単に変更できます。

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

19
rppig

現在、私はangular-cssを使用しています： https://github.com/door3/angular-css 私見、それは最高で最も柔軟なソリューションの1つです瞬間。

7
Olga Gnatenko

AngularJSを使用する代わりに、JQueryを使用してファイルをロードしようとしました。それは私のために働いた。 参照用にこのリンクを確認できます

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

私は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);
    };

これは、angularjsルート/ページを表示/ロードする前にcssを確実にロードするため、Promiseを使用しました。

0
Abdeali Chandanwala