AngularJS $ Kompilierung nicht

Question

definiert

Ich versuche AngularJS zu lernen, und ich versuche, dynamisch einige DOM-Elemente zu kompilieren ... Ich habe die Demo ausprobiert:

try { 
     var templateHTML = angular.element('<p>{{total}}</p>'), 
      scope = ....; 

     var clonedElement = $compile(templateHTML)(scope, function(clonedElement, scope) { 
      //attach the clone to DOM document at the right place 
     }); 

     //now we have reference to the cloned DOM via `clone` 
} catch (ex) { 
alert(ex.message); 
} 

aber alles, was ich zurück ist ein "$ compile ist nicht definiert"

HILFE!

Answer 1

Woher rufen Sie diesen Code? Kann man mit angle.element (...) davon ausgehen, dass es sich außerhalb des Angular Frameworks befindet?

Wenn ja, können Sie diese verwenden:

// Split across two lines for readability... 
angular.element(<something within Angular's scope>) 
    .injector().get('$compile')(...) 

Wenn nicht, müssen Sie einfach in die Steuerung/Richtlinie/Service injizieren $ zu kompilieren.

Answer 2

Ein Beispielcode für die Verwendung von $ compile in einer Direktive. Im Grunde gehen Sie voran & zuerst fügen Sie das Element an DOM (vielleicht wollen Sie es unsichtbar zu halten), dann führen Sie die Kompilierung mit einem Finder .. wie von Rtcherry erwähnt, sollte $ compile injiziert werden.

 // 
     componentModule.directive('getCompilerWk', function($compile) { 
      return { 
      restrict: 'A', 
      link: function(scope, elm, attr) { 
       elm.click(function(){ 
        $(body).append(templateHTML); 
        $compile($(body).find('p'))(scope); 

       }) 
      } 
      }; 
     });