javascript - Angular compile in指令似乎进入了无限循环

Question

我有一个带有动态文本的指令。我希望能够使用 ng-click 指令从文本中调用函数。我知道最好的方法是将 html 编译成模板。但是当我尝试这样做时，我陷入了无限循环:

angular.module('app')
  .directive('times', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        scope.selectDay = function() {
          console.log("Clicked on directive");
        }

        var content = element.html("<div><span ng-click='selectDay()'>Some test content</span></div>");
        var compiled = $compile(content);
        element.append(content);
        compiled(scope);        
      }
    };
  }]);

Answer 1

您需要更改编译方式。首先给元素内容，然后用作用域编译它的内容:

element.html("<div><span ng-click='selectDay()'>Some test content</span></div>");
$compile(element.contents())(scope);

Fiddle