Javascript 指令中的角度编译似乎进入无限循环

我有一个动态文本指令。我希望能够使用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);        
      }
    };
  }]);

angular.module（'app'）
.directive（'times'，['$compile'，function（$compile）{
返回{
限制：'E'，
链接：函数postLink（范围、元素、属性）{
scope.selectDay=函数（）{
log（“点击指令”）；
}
var content=element.html（“一些测试内容”）；
var compiled=$compile（内容）；
元素。追加（内容）；
编制（范围）；
}
};
}]);

您需要更改编译方式。首先为元素提供内容，然后使用范围编译其内容：

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

element.html（“一些测试内容”）；
$compile（element.contents（））（范围）；

---

您的问题是在将元素附加到DOM后编译了错误的元素， 您应该首先编译具有范围的新元素，然后附加到指令元素

代码

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

angular.module（'app'，[]）
.directive（'times'，['$compile'，function（$compile）{
返回{
限制：'E'，
链接：函数postLink（范围、元素、属性）{
scope.selectDay=函数（）{
log（“点击指令”）；
}
var content=“一些测试内容”；
var compiled=$compile（内容）；
元素append（已编译（范围））；
}
};
}]);

---

用一种简单的方式，如下所示：

angular.module('app').directive('times', [
    '$compile',
    function($compile) {
        return {
            restrict: 'E',
            template: '<div><span ng-click="selectDay()">test</span></div>',
            link: function(scope, element, attrs) {
                return scope.selectDay = function() {
                    return console.log('Clicked on directive');
                };
            }
        };
    }
]);

angular.module（'app'）。指令（'times'[
“$compile”，
函数（$compile）{
返回{
限制：'E'，
模板：“测试”，
链接：函数（范围、元素、属性）{
return scope.selectDay=函数（）{
返回console.log（'Clicked on directive'）；
};
}
};
}
]);

您需要重新安排内容创建和编译的顺序。 创建内容，然后创建compile函数，然后编译，然后追加已编译的内容。演示：

角度模块（“应用程序”，[]） .directive（'times'，['$compile'，function（$compile）{ 返回{ 限制：'E'， 链接：函数postLink（范围、元素、属性）{ scope.selectDay=函数（）{ log（“点击指令”）； }; var content=“一些测试内容”； var compiled=$compile（内容）； var linked=已编译（范围）； 元素。追加（链接）； } }; }]);

---

您能否澄清“从文本调用函数”的含义？我想知道手动调用

$compile

是否没有必要…@MichalCharemza我的意思是我需要通过连接字符串根据特定条件生成html。我用于html的字符串中有按钮，这些按钮需要可单击并调用主作用域上的函数。条件是什么？你能把问题中的代码展开一点来说明你的意思吗？（我的目标是看看你想要的东西是否可以在direcrive的模板中实现）这个版本仍然让我进入无限的世界loop@Tom奇怪的是，我在fiddle示例中没有看到循环。你是在看这个例子，还是在你更新的代码中有循环？我没有看到小提琴，那是在我更新的代码中。我很难看到代码中改变它的部分。我需要更新模板的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 = "<div><span ng-click='selectDay()'>Some test content</span></div>";
        var compiled = $compile(content);
        var linked =compiled(scope);    
        element.append(linked);



      }
    };
  }]);