8

モジュールが定義されたWebページ(myModule)があり、angularjsを使用してブーストラップしています。

angular.bootstrap(element,[myModule.name]);

ボタンをクリックした後、ダイナミックhtmlを追加し、を使用してコンパイルします

$compile('<my-element data="data"></my-element>',$scope.$new());

ディレクティブはを使用して追加されます

myModule.directive('myElement',function(){});

問題は、ブートストラップを呼び出す前にディレクティブを追加すると、$compileがディレクティブを正しく処理してしまうことです。ただし、ブートストラップを呼び出した後にディレクティブが追加された場合、$compileは私のhtmlに対して何もしません。クラスng-scopeを追加するだけで、ディレクティブ/タグは処理されません。

私の場合、ブートストラップが呼び出される前にすべてのディレクティブがロードされるわけではありません。ブートストラップを呼び出した後にディレクティブをロードする場合、ページ内でそれを使用するにはどうすればよいですか?

ありがとう。

編集:明確にするために。すべてのディレクティブは動的にロードされます。ブートストラップの前にロードしたものは正常に機能します。ブートストラップ後にロードしたものは失敗します。ロードされたディレクティブを交換すると、同じ結果になる可能性があるため、ディレクティブではありませんが、ブートストラップ後、新しく追加されたディレクティブは有効になっていないようです。

4

2 に答える 2

8

レイジーコントローラーまたはディレクティブを登録する場合、それぞれ$controllerProvider$compileProviderを取得する必要があります。

これは構成フェーズでのみ実行できるため、コントローラー/ディレクティブをロードするまで参照を保持する必要があります。

最近、コントローラーの遅延読み込みに取り組んでいましたが、今日はディレクティブのサポートを追加しました。ここでコードを確認してください。

https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/

特にこのモジュールlazy-directives.js

:プロジェクトではRequireJSを使用していますが、ソリューションをyepnopeに適用するのは非常に簡単です。

于 2012-11-22T22:32:06.937 に答える
2

このフィドルは、動的にロード/登録して使用する方法を示しています。

  • Angularコントローラー(を使用$controllerProvider
  • Angularディレクティブ(を使用$compileProvider
  • Angular部分テンプレート(を使用$templateCache

コード:セットアップ

// Initialize app.lazyController and app.lazyDirective.
// We will later use them to create controller and directives dynamically.
var app = angular.module('app', []);
app.config(function($controllerProvider, $compileProvider) {
        // see page 12 of:
        //    http://www.slideshare.net/nirkaufman/angularjs-lazy-loading-techniques
        app.lazyController = $controllerProvider.register;

        // see: http://jsfiddle.net/8Bf8m/33/
        app.lazyDirective = $compileProvider.directive;
    });

// set of partials
var partials = [];

// store scope & templateCache, so we can dynamically insert partials
var scope, templateCache;

// define main controller
function MainCtrl($scope, $templateCache) {
    $scope.partials = partials;

    scope = $scope;
    templateCache = $templateCache;
}

コード:例

var maxPartials = 3;
var i = 0;
var timer = setInterval(function() {
    var i = partials.length;

    app.lazyDirective('clickMe', function () { return {
        link : function (scope, element) {
            element.bind('click', function () {
                alert('Clicked: ' + element.text());
            });
        },
    };});

    // define controller
    var ctrlName = 'partial' + i + 'Ctrl';
    app.lazyController(ctrlName, function($scope) {
        $scope.text = 'hi ' + i;
    });

    // add partial template that I have available in string form
    var newPartial = {
        name: 'template' + i,
        content: '<div ng-controller="' + ctrlName + '" class="a' + i + '">' +
        '<input type="text" ng-model="text"></input>'+
        '{{text}} <br/>' + 
        '<button click-me="">Click Me!</button>' +
        '</div> <br/> <br/>'
    };
    partials[i] = newPartial;

    // add template and notify angular of the content change
    templateCache.put(partials[i].name, partials[i].content);
    scope.$apply();

    // stop timer
    if (partials.length >= maxPartials)  clearInterval(timer);
}, 1000);
于 2014-06-15T09:16:53.870 に答える