javascript - 无法读取未定义的属性 'compile'。似乎无法发现错误

Question

我正在从事一个业余爱好项目，在该项目中我正在生成希望 Angular 编译的动态代码。

在 Chrome 中我收到以下错误: 无法读取未定义的属性“compile”。

这里有一些代码示例。

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>

在我的 app.js 中，我有一个编译指令，该指令在之前的项目中工作过，其设置是相同的。

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);
    }
);

}； }]);

我已在 Controller 中包含 $compile 关键字

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

请告诉我您是否能发现错误。预先感谢您!

Answer 1

将指令名称从“compile”更改为其他名称。