Die Eigenschaft 'compile' von undefined kann nicht gelesen werden. Ich kann den Fehler nicht erkennen

Question

Ich arbeite an einem Hobby-Projekt, wo ich dynamischen Code produziere, den ich Angular kompilieren möchte.

In Chrom erhalte ich die folgenden Fehler: Kann Eigenschaft 'Compile' von undefined nicht lesen.

Hier sind einige Codebeispiele.

JS

$scope.oneC = "<button dynamic='right' id='rightarrow' class='fa fa-arrow-right fa-5x' aria-hidden='true' ng-click='next()' style='float: right;'></button>"; 

HTML

<div id="one" class="columns" compile="oneC"></div> 

Und in meinem app.js Ich habe eine Compiler-Direktive, die in früheren Projekten gearbeitet hat, wo das Setup das gleiche war.

App.js

kakalunchApp.directive('compile', ['$compile', function ($compile) { 
return function(scope, element, attrs) { 
    scope.$watch(
    function(scope) { 
     // watch the 'compile' expression for changes 
     return scope.$eval(attrs.ngHtmlCompile); 
    }, 
    function(value) { 
     // when the 'compile' expression changes 
     // assign it into the current DOM 
     element.html(value); 

     // compile the new DOM and link it to the current 
     // scope. 
     // NOTE: we only compile .childNodes so that 
     // we don't get into infinite loop compiling ourselves 
     $compile(element.contents())(scope); 
    } 
); 

}; }]);

Ich habe die $ Kompilierung Schlüsselwort in der Steuerung enthalten

kakalunchApp.controller('MainCtrl', function ($scope, $window, $compile, $sce) 

Bitte sagen Sie mir, ob Sie den Fehler erkennen. Vielen Dank im Voraus!

Answer 1

Ändern Sie den Namen Ihrer Anweisung von "kompilieren" zu etwas anderem.