2016-04-05 9 views
0

Ich arbeite mit einer alten MVC-Anwendung, und ich möchte einige Angular in eine der Ansichten implementieren.Angular Inject und kompilieren HTML mit Controller

Nach dem anfänglichen Kampf um Angular zu $compile das neue DOM zu bekommen, bin ich mit einem Fehler, den ich nicht zu überwinden scheinen.

So wie es funktioniert (und etwas, was ich nicht ändern kann) ist, dass jQuery die spezifische Ansicht/Schicht Markup lädt, und wenn seine im DOM, ich folgendes tun:

// Compiles the DOM into the Angular application 
if ($layer.hasClass('angular-view')) { 
    angular.injector(['ng']).invoke(function ($rootScope, $compile) { 
     $compile($layer)($rootScope); 
     $rootScope.$digest(); 
    }); 
} 

Dies erlaubt mir, um zu sehen, der ausgewertete Wert ({{2+2}}) auf der gerenderten Seite, das ist toll, aber wenn ich versuche, einen Controller in das Markup zu kompilieren, erhalte ich folgende Fehlermeldung:

Argument 'MyController' is not a function, got undefined

Dies ist die Auszeichnungs mir Injektion in die Anwendung:

<div ng-controller="MyController"> 
    <span>{{2+2}} - {{name}}</span> 
</div> 

Hier ist, wie ich das App-Modul bin erklärt:

angular.module('app', []) 
    .controller('MyController', function ($scope) { 
     $scope.name = "Terry Nutkins"; 
    }); 

ich die Anwendung in der "main" DOM ​​wie folgt initialisiert:

<body ng-app> 
    <!-- Content --> 
</body> 

(Ich habe auch probiert ng-app = "app")

Irgendwelche Gedanken?


Ich möchte auch hinzufügen, dass, wenn ich das Modul in der Debug-Konsole abfragen, ich der Controller dort sitzen sehen können, bereit zu gehen.

Antwort

2

Ich habe die Ursache des Problems gefunden - und ich hoffe, dass jemand anderes dies nützlich findet.

Wenn ich das DOM injiziere und kompiliere, muss ich angeben, WELCHER Injektor ich verwenden möchte. In meinem Fall musste ich "app" zum Array des angular.injector Anrufs

// Compiles the DOM into the Angular application 
if ($layer.hasClass('angular-view')) { 
    angular.injector(['ng', 'app']).invoke(function ($rootScope, $compile) { 
     $compile($layer)($rootScope); 
     $rootScope.$digest(); 
    }); 
} 
hinzufügen
Verwandte Themen