40

私はAngularの学習を開始し、ここのチュートリアルに従っています - http://docs.angularjs.org/tutorial/step_00

GitHub からシードの例をダウンロードしましたが、うまく機能します。質問があります。部分ビューで外部 js ファイルを参照する必要がある場合、最初に index.html ファイルに追加する必要がありますか? アプリをできるだけ無駄のないものにして、現在のビューに必要な js 参照のみを含めたいと考えています。ビューに基づいて動的にjsファイルをロードすることは可能ですか?

4

2 に答える 2

41

これは私にとってはうまくいきました。最軽量のソリューションを探している他の人のために投稿すると思いました。

ページの html タグにトップレベルのコントローラーがあり、部分ビューごとにセカンダリ コントローラーがあります。

最上位コントローラーで、次の関数を定義しました…</p> 

$scope.loadScript = function(url, type, charset) {
    if (type===undefined) type = 'text/javascript';
    if (url) {
        var script = document.querySelector("script[src*='"+url+"']");
        if (!script) {
            var heads = document.getElementsByTagName("head");
            if (heads && heads.length) {
                var head = heads[0];
                if (head) {
                    script = document.createElement('script');
                    script.setAttribute('src', url);
                    script.setAttribute('type', type);
                    if (charset) script.setAttribute('charset', charset);
                    head.appendChild(script);
                }
            }
        }
        return script;
    }
};

したがって、セカンダリ コントローラーでは、次のような呼び出しで必要なスクリプトを読み込むことができます…</p> 

$scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8');

外部スクリプトに含まれるオブジェクトが使用可能になるまでに少し時間がかかるため、使用する前にオブジェクトの存在を確認する必要があります。

誰かが時間を節約できることを願っています。

于 2014-03-21T19:15:40.410 に答える
17

https://oclazyload.readme.io/を試しました。それは箱から出して動作します。

bower install oclazyload --save

モジュールにロードし、必要なモジュールをコントローラーに挿入します。

var myModule = angular.module('myModule', ['oc.lazyLoad'])
   .controller('myController', ['$scope', '$ocLazyLoad', '$injector',

       function($scope, $ocLazyLoad, $injector) {
           $ocLazyLoad.load(
                   ['myExtraModule.js',
                       'orAnyOtherBowerLibraryCopiedToPublicFolder.js'
                   ])
               .then(function() {
                   // Inject the loaded module
                   var myExraModule = $injector.get('myExtraModule');
               });
       }
   ]);
于 2015-06-11T02:57:00.123 に答える