2016-10-27 7 views
0

Bild, das ich die folgende .js Code haben:Wie man ein neues Modul dynamisch hinzufügt?

$.ajax({ 
    url: 'some/url', 
    success: function(result) { 
     $activeTabContainer.html(result); 
    } 
}); 

Die $activeTabContainer ist jQuery ausgewählt div.

Das Ergebnis Objekt enthält HTML (mit Script-Tag), vielleicht so etwas wie:

<div ng-app="mySpa"> 
    <div ng-controller="myController"></div> 
</div> 

Und später in der gleichen .html Datei ein Skript-Tag, das enthält:

(function() { 
    "use strict"; 
    var app = angular.module("mySpa", []); 
    app.controller("myController", [function() { 
     debugger; 
    }]); 
})(); 

Es führt perfekt den .js Teil im Skript-Tag, aber ich denke, dass angular muss irgendwie über das dynamisch hinzugefügte Modul benachrichtigt werden und seine Controller, etwas wie dynamisch Bootstrapping.

Hat jemand eine Idee?

+2

Sie Winkel- und jQuery nicht mischen. Auf den jQuery-ausgewählten div kann nicht zugegriffen werden, nachdem angular bootstrapped wurde. Sie müssen die $ http und die Kodierungskonvention von angular verwenden. – Hoyen

+0

Ich könnte buchstäblich an einer Hand zählen, wie oft ich jQuery in Angular tatsächlich verwenden musste - im Allgemeinen, wenn Sie dafür greifen, bedeutet es, dass Sie etwas suboptimal machen. –

+0

@Hoyen Ich vermische mich nicht. –

Antwort

0

Ich fand die Lösung, es passiert, weil angular nicht automatisch bootstrap, wenn ein neues Modul dynamisch hinzugefügt wird. Sie müssen es manuell Bootstrap:

angular.bootstrap(document, ["mySpa"]); 

und Bingo es :-)

Link zur Dokumentation funktioniert: https://docs.angularjs.org/api/ng/function/angular.bootstrap

Verwandte Themen