加載一個AngularJS控制器動態

Question

我有一個現有頁進我需要可動態加載控制器下降的角應用程序。

這裏是它實現了我最好的猜測，應該如何基於API和一些相關的問題做一個片段，我發現：

// 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。請注意，這是對事件鏈的簡化，上面各行之間有各種異步調用和用戶輸入。

當我試圖運行上面的代碼，它是由$編譯返回的連接拋出：Argument 'Ctrl' is not a function, got undefined。如果我正確理解引導程序，它返回的噴油器應該知道Foo模塊，對吧？

相反，如果我讓使用angular.injector(['ng', 'Foo'])一個新的噴油器，它似乎工作，但它會創建一個新的$rootScope這不再是相同的範圍內，其中Foo模塊進行自舉的元素。

我使用正確的功能來做到這一點或者是有什麼我已經錯過了？我知道這是不是這樣做的角的方式，但我需要補充的是使用角度來不老的網頁新的組件，而我不知道這一切時，我引導模塊，可能需要的組件。

UPDATE：

我已經更新了fiddle表明，我需要能夠在不確定個時刻多個控制器添加到頁面。

Answer 1

我已經找到了一個可能的解決方案，我並不需要引導之前瞭解的控制器：

// 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。唯一的問題是你需要存儲$controllerProvider並將它用在真正不應該使用的地方（啓動後）。也有似乎沒有一種簡單的方法來獲得在使用，直到其註冊定義控制器的功能，所以我通過模塊_invokeQueue，這是無證需要循環。

UPDATE：要註冊指令和服務，而不是簡單地$controllerProvider.register分別使用$compileProvider.directive和$provide.factory。同樣，您需要在初始模塊配置中保存對這些參考的引用。

UDPATE 2：Here's a fiddle它自動註冊所有加載的控制器/指令/服務，而不必單獨指定它們。

Answer 2

引導（）將調用AngularJS編譯器爲你，就像NG-應用。

// Make module Foo 
angular.module('Foo', []); 
// Make controller Ctrl in module Foo 
angular.module('Foo').controller('Ctrl', function($scope) { 
    $scope.name = 'DeathCarrot' }); 
// Load an element that uses controller Ctrl 
$('<div ng-controller="Ctrl">{{name}}</div>').appendTo('body'); 
// Bootstrap with Foo 
angular.bootstrap($('body'), ['Foo']); 

Fiddle。

Answer 3

我剛剛改進了Jussi-Kosunen編寫的函數，以便所有的東西都可以通過一次調用完成。

function registerController(moduleName, controllerName, template, container) { 
    // Load html file with content that uses Ctrl controller 
    $(template).appendTo(container); 
    // 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]); 
      } 
     } 

     angular.injector(['ng', 'Foo']).invoke(function($compile, $rootScope) { 
      $compile($('#ctrl'+controllerName))($rootScope); 
      $rootScope.$apply(); 
     }); 
} 

這種方式，你可以從任何地方和實例化控制器編程，甚至是嵌套加載您的模板。

這裏是一個工作示例加載內另一個控制器： http://plnkr.co/edit/x3G38bi7iqtXKSDE09pN

Answer 4

我建議在運行時看看ocLazyLoad library，哪些寄存器（現有模塊或控制器，服務等）的模塊，並且還使用requireJs或其他此類庫加載它們。

Answer 5

我還需要在運行時從angularJs上下文之外的javascript函數添加多個視圖，並將其綁定到控制器，所以這裏就是我想出了：

<div id="mController" ng-controller="mainController"> 
</div> 

<div id="ee"> 
    2nd controller's view should be rendred here 
</div> 

現在呼籲setCnt（）函數將注入並編譯HTML，它會被鏈接到第二控制器：

var app = angular.module('app', []); 

function setCnt() { 
    // Injecting the view's html 
    var e1 = angular.element(document.getElementById("ee")); 
    e1.html('<div ng-controller="ctl2">my name: {{name}}</div>'); 

    // Compile controller 2 html 
    var mController = angular.element(document.getElementById("mController")); 
    mController.scope().activateView(e1); 
} 

app.controller("mainController", function($scope, $compile) { 
    $scope.name = "this is name 1"; 

    $scope.activateView = function(ele) { 
    $compile(ele.contents())($scope); 
    $scope.$apply(); 
    }; 
}); 

app.controller("ctl2", function($scope) { 
    $scope.name = "this is name 2"; 
}); 

這裏的測試這樣一個例子：http://refork.com/x4bc

希望這有助於。

Answer 6

'use strict'; 

var mainApp = angular.module('mainApp', [ 
    'ui.router', 
    'ui.bootstrap', 
    'ui.grid', 
    'ui.grid.edit', 
    'ngAnimate', 
    'headerModule', 
    'galleryModule', 
    'appointmentsModule', 
]); 


(function(){ 

    var App = { 
     setControllers: mainApp.controller(controllers), 
     config: config.config(), 
     factories: { 
      authFactory: factories.auth(), 
      signupFactory: factories.signup(), 
      someRequestFactory: factories.saveSomeRequest(), 
     }, 
     controllers: { 
      LoginController: controllers.userLogin(), 
      SignupController: controllers.signup(), 
      WhateverController: controllers.doWhatever(), 
     }, 
     directives: { 
      signup: directives.signup(), // add new user 
      openLogin: directives.openLogin(), // opens login window 
      closeModal: directives.modalClose(), // close modal window 
      ngFileSelect: directives.fileSelect(), 
      ngFileDropAvailable: directives.fileDropAvailable(), 
      ngFileDrop: directives.fileDrop() 
     }, 
     services: { 
      $upload: services.uploadFiles(), 
     } 
    }; 
})(); 

上面的代碼只是一個例子。

這樣你就不需要把ng-controller="someController"頁面上的任何地方 - 你只申報<body ng-app="mainApp">

同樣的結構可用於每個模塊或模塊內部模塊

Answer 7

爲什麼不使用配置和用戶界面 - 路由器？

它被加載在運行時，你有沒有需要出示你的控制器中的HTML代碼

例如像下面

var config = { 

    config: function(){ 
     mainApp.config(function ($stateProvider, $urlRouterProvider){ 
      $urlRouterProvider.otherwise("/"); 
      $stateProvider 

      .state('index',{ 
       views:{ 
        'main':{ 
         controller: 'PublicController', 
         templateUrl: 'templates/public-index.html' 
        } 
       } 
      }) 
      .state('public',{ 
       url: '/', 
       parent: 'index', 
       views: { 
        'logo' : {templateUrl:'modules/header/views/logo.html'}, 
        'title':{ 
         controller: 'HeaderController', 
         templateUrl: 'modules/header/views/title.html' 
        }, 
        'topmenu': { 
         controller: 'TopMenuController', 
         templateUrl: 'modules/header/views/topmenu.html' 
        }, 
        'apartments': { 
         controller: 'FreeAptController', 
         templateUrl:'modules/free_apt/views/apartments.html' 
        }, 
        'appointments': { 
         controller: 'AppointmentsController', 
       templateUrl:'modules/appointments/views/frm_appointments.html' 
        }, 
       } 
      }) 
      .state('inside',{ 
       views:{ 
        'main':{ 
         controller: 'InsideController', 
         templateUrl: 'templates/inside-index.html' 
        }, 
       }, 
       resolve: { 
        factory:checkRouting 
       } 
      }) 
      .state('logged', { 
       url:'/inside', 
       parent: 'inside', 
       views:{   
        'logo': {templateUrl: 'modules/inside/views/logo.html'}, 
        'title':{templateUrl:'modules/inside/views/title.html'}, 
        'topmenu': { 
         // controller: 'InsideTopMenuController', 
         templateUrl: 'modules/inside/views/topmenu.html' 
        }, 
        'messages': { 
         controller: 'MessagesController', 
         templateUrl: 'modules/inside/modules/messages/views/initial-view-messages.html' 
        }, 
        'requests': { 
         //controller: 'RequestsController', 
         //templateUrl: 'modules/inside/modules/requests/views/initial-view-requests.html' 
        }, 

       } 

      }) 

    }); 
}, 

}; 

Answer 8

這是我做的，2份真，使用納克 - 控制器與其範圍定義的功能，然後$控制器服務創建動態控制器： -

首先，HTML - 我們需要一個靜態控制器，它將實例化動態控制器..

<div ng-controller='staticCtrl'> 
    <div ng-controller='dynamicCtrl'> 
    {{ dynamicStuff }} 
    </div> 
</div> 

靜態控制器'staticCtrl'定義一個名爲'dynamicCtrl'的作用域成員，它被調用來創建動態控制器。 NG-控制器將通過名稱採取任何預定義的控制器或着眼於當前作用域同名的功能..

.controller('staticCtrl', ['$scope', '$controller', function($scope, $controller) { 
    $scope.dynamicCtrl = function() { 
    var fn = eval('(function ($scope, $rootScope) { alert("I am dynamic, my $scope.$id = " + $scope.$id + ", $rootScope.$id = " + $rootScope.$id); })'); 
    return $controller(fn, { $scope: $scope.$new() }).constructor; 
    } 
}]) 

我們使用eval（）獲得一個字符串（我們的動態代碼可以來自任何地方）和然後$ controller控制器服務將採用預定義的控制器名稱（正常情況下）或一個函數構造函數後跟構造函數參數（我們傳入一個新的作用域） - Angular將注入（像任何控制器）到函數中，我們只是要求上面的$ scope和$ rootScope。