Yükleme AngularJS denetleyicisi dinamik

SORU

6 Mart 2013, ÇARŞAMBA

Yükleme AngularJS denetleyicisi dinamik

İçine dinamik olarak yüklenebilecek denetleyicileri ile açısal bir uygulama indirmen lazım varolan bir sayfa var.

Burada API ve bulduğum bazı ilgili sorular dayanarak bunun nasıl yapılması gerektiği gibi en iyi tahminim uygulayan bir parçacık:

// Make module Foo
angular.module('Foo', []);
// Bootstrap Foo
var injector = angular.bootstrap($('body'), ['Foo']);
// Make controller Ctrl in module Foo
angular.module('Foo').controller('Ctrl', function() { });
// Load an element that uses controller Ctrl
var ctrl = $('<div ng-controller="Ctrl">').appendTo('body');
// compile the new element
injector.invoke(function($compile, $rootScope) {
    // the linker here throws the exception
    $compile(ctrl)($rootScope);
});

JSFiddle. Bu yukarıdaki satırlar arasında çeşitli zaman uyumsuz aramalar ve kullanıcı girişi vardır olayların gerçek zincir, bir sadeleştirilmesi olduğunu unutmayın.

Yukarıdaki kodu çalıştırmaya çalıştığımda, derlemek $atar döndürülen linker: Argument 'Ctrl' is not a function, got undefined. Eğer bootstrap doğru anladıysam, döner enjektör Foo Bu modül, değil mi bilmeli?

Bunun yerine ben yeni bir enjektör kullanarak angular.injector(['ng', 'Foo']), öyle görünüyor ki iş ama oluşturduğu yeni $rootScope artık aynı kapsam olarak eleman nerede Foo modül oldu önyüklenen.

Doğru işlevsellik bunu yapmak için kullanıyorum ya da kaçırdığım bir şey var mı? Biliyorum bu değil mi yapıyorlar Açısal yol, ama ihtiyacım var Ekle yeni bileşenler kullanan Açısal eski sayfaları yok ve bilmiyorum tüm bileşenleri olabilir gerektiğinde ben bootstrap modül.

GÜNCELLEME:

Zaman içinde belirsiz noktalarda sayfaya birden çok denetleyicileri eklemek mümkün olmak istiyorum göstermek için fiddle güncelledik.

CEVAP

8 Mart 2013, Cuma

Önyükleme önce kontrol cihazının bilmeme gerek yok, olası bir çözüm buldum:

// Make module Foo and store $controllerProvider in a global
var controllerProvider = null;
angular.module('Foo', [], function($controllerProvider) {
    controllerProvider = $controllerProvider;
});
// Bootstrap Foo
angular.bootstrap($('body'), ['Foo']);

// .. time passes ..

// Load javascript file with Ctrl controller
angular.module('Foo').controller('Ctrl', function($scope, $rootScope) {
    $scope.msg = "It works! rootScope is "   $rootScope.$id  
        ", should be "   $('body').scope().$id;
});
// Load html file with content that uses Ctrl controller
$('<div id="ctrl" ng-controller="Ctrl" ng-bind="msg">').appendTo('body');

// Register Ctrl controller manually
// If you can reference the controller function directly, just run:
// $controllerProvider.register(controllerName, controllerFunction);
// Note: I haven't found a way to get $controllerProvider at this stage
//    so I keep a reference from when I ran my module config
function registerController(moduleName, controllerName) {
    // Here I cannot get the controller function directly so I
    // need to loop through the module's _invokeQueue to get it
    var queue = angular.module(moduleName)._invokeQueue;
    for(var i=0;i<queue.length;i  ) {
        var call = queue[i];
        if(call[0] == "$controllerProvider" &&
           call[1] == "register" &&
           call[2][0] == controllerName) {
            controllerProvider.register(controllerName, call[2][1]);
        }
    }
}
registerController("Foo", "Ctrl");
// compile the new element
$('body').injector().invoke(function($compile, $rootScope) {
    $compile($('#ctrl'))($rootScope);
    $rootScope.$apply();
});

Fiddle. Tek sorun $controllerProvider mağaza ve gerçekten kullanmış (bootstrap sonra) olmamalı bir yerde kullanmak gerekir. Ayrıca orada değilmiş kolay bir yol almak için bir işlev tanımlamak için kullanılan bir kumanda kadar kayıtlı ihtiyacım var, için döngü modülü _invokeQueue, belgelenmemiş.

GÜNCELLEME:Direktifleri ve hizmetleri, $controllerProvider.register yerine kaydetmek için sadece $compileProvider.directive $provide.factory sırasıyla kullanın. Yine, ilk modülü yapılandırma bu başvurular kaydetmeniz gerekir.

UDPATE 2:Otomatik olarak direktifler/Hizmetleri/tüm kontrolörler kaydeden Here's a fiddle bunları tek tek belirtmek zorunda kalmadan yüklenir.

Bunu Paylaş: