20

私は angularjs を使用しており、ページの開始時にすべてのディレクティブをロードするのではなく、必要に応じてディレクティブをロードできるようにしたいと考えています。最も頻繁に使用するプラグインのディレクティブを作成しようとしています。

このようにyepnopeして、最終的に html をコンパイルする前に、1 つのダイレクトで必要なすべてのディレクティブをロードすることができます。

ディレクティブがページの開始時に他のディレクティブと共に読み込まれると、すべてが正常に機能します。ただし、'child' ディレクティブが後で ('parent' 内で) ロードされた場合、それは有効になりません。以下は、'parent' ディレクティブのコンパイル フィールドの pre フィールドのコードです。

    ...
    var pre = function (scope, element, attrs) {
        element.html('Please wait. Loading...');
        ang.loadDirectives('caiDatePicker', function () {
            console.log('loaded');
            scope.data.raw = scope.rawData;
            var html = createObjUi(scope, scope.data, scope.defn);
            element.html(html); //data
            $compile(element.contents())(scope.$new());
            scope.$apply();
        });
    };
    return { restrict:'A', compile: {pre:pre,post:function(){...}};

ang.loadDirectivesyepnope を使用してディレクティブをロードします。「子」ディレクティブのコードの一部は次のとおりです。

angular.module('mycomponents') //PS: I'm assuming this will fetch the already created module in the 'parent' directive
.directive('caiDatePicker', function ($parse) {
    return {
        scope: {},
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch('this.$parent.editing', function (v) {
                scope.editing = v;
            });
            yepnope({
                test: $().datePicker,
                nope: [
                    '/content/plugins/datepicker/datepicker.js', //todo: use the loader
                    '/content/plugins/datepicker/datepicker.css'
                ],
                complete: function () {
                    if (scope.model && scope.model.value) {
                        var date = scope.model.value;
                        element.val(date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear());
                    }
                    element.datepicker({ weekStart: 1, format: 'dd/mm/yyyy' })
                        .on('changeDate', function (ev) {
                            scope.model.value = ev.date;
                            scope.$apply();
                        });
                }
            });
            attrs.$observe('path', function (v) {
                var fn = $parse(v);
                var model = fn(scope.$parent);
                scope.model = model;
            });
        }
    }
});

そもそも私がやっていることは可能ですか？

もしそうなら、私は何を間違っていますか？

4

4 に答える 4

17

ディレクティブを登録する場合は、アプリケーションがブートストラップされた後に、モジュール API の代わりに $compileProvider を使用する必要があります。例えば...

$compileProvider.directive('SomeLazyDirective', function()
{
    return {
        restrict: 'A',
        templateUrl: 'templates/some-lazy-directive.html'
    }
})

次に、$routeProvider でルートを定義するときに「resolve」関数を使用して、スクリプト ローダーを使用して遅延ディレクティブをロードできます。これを行うには、ディレクティブとその他の遅延依存関係が読み込まれると解決される promise を関数が返すようにします。AngularJS は、promise が解決されるのを待ってからルートをレンダリングするため、ビューがディレクティブを必要とする前にディレクティブの準備が整います。AngularJS で遅延読み込みを実現する方法を詳述したブログ記事を書きました。私がここで述べたことをより詳細に説明しており、http://ify.io/lazy-loading-in-angularjs/で見つけることができます。

于 2013-04-21T10:45:29.533 に答える
13

アプリケーションに添付されたコンパイル プロバイダーを使用して、実際のモジュール参照があればどこからでもアクセスできるようにしました。

var app = angular.module('アプリ');
app.config(function ($compileProvider) {
    app.compileProvider = $compileProvider;
});

その後、ブートストラップの後、コンパイルおよびリンクされるディレクティブを遅延ロードできます。

app.compileProvider.directive('SomeLazyDirective', function()
{
    戻る {
        制限: 'A',
        templateUrl: 'templates/some-lazy-directive.html'
    }
}))
于 2014-02-05T11:14:10.367 に答える
2

長い間検索しても答えが得られなかったので、次のようになりました。

  1. Angularアプリを作成します。これもAngularモジュールです。
  2. app.directive（name、function）を使用して、いつでもモジュールに任意のディレクティブを追加できます。これらは、非同期でロードされるディレクティブにすることができます。
  3. 任意の要素をブートストラップできます。ブートストラップするときは、モジュールのリストでアプリをAngularに指定します。

問題は、yepnopeが必要な機能を完全に実行していなかったことです。最後に、完全な関数が実行されることを保証するように見えるyepnopeの上に小さなラッパーを作成します。

最終的なコードは次のようになります。

var app3 = new Cai.AngApp('app3');
app3.loadControllers('app1.controller3', function () {
        app3.loadDirectives('jsonEditor', 'datePicker', function () {
            app3.bootstrap($('#d3'));
    });
});
于 2012-09-29T08:06:27.677 に答える
-1

angularJSディレクティブを使用することが適切な答えになるかどうかはわかりません

私は次のことを行いましたが、問題なく動作します

  • リスト項目のテンプレートを決定するために口ひげリストを使用します。 ( https://github.com/janl/mustache.js/ )
  • アプリケーション API のロード時に、コンテンツに応じて、10 ～ 50 レコードのみをロードする必要があります。
  • リストのスクロールで、最後に到達しようとしているときに、次の apis 呼び出しフォームから次の 20 項目などを起動します。

  • データが変更されていない場合は、ローカルに保存して再入力できます。

  • 最新のレコードを取得し続け、ローカルで広告します。

于 2018-01-19T02:19:47.687 に答える