在指令角编译似乎进入无限循环 [英] Angular compile in directive seems to go into infinite loop

问题描述

我有一个动态文本指令。我希望能有NG-点击指令从文本调用函数。我知道要做到这一点的最好办法是编译HTML成模板。但是，当我尝试这样做，我到一个无限循环：

  angular.module（应用）
  .directive（'次'，['$编译，函数（$编译）{
    返回{
      限制：'E'，
      链接：功能postLink（范围，元素，ATTRS）{
        scope.selectDay =功能（）{
          的console.log（点击了指令）;
        }        VAR内容= element.html（＆LT; D​​IV＆GT;＆LT;跨度NG点击='selectDay（）'＆GT;一些测试内容与LT; / SPAN＆GT;＆LT; / DIV＆gt;中）;
        VAR编译= $编译（内容）;
        element.append（内容）;
        编译（范围）;
      }
    };
  }]）;
 

解决方案

您需要更改您正在编译的方式。首先给该元素的内容，然后编译它与范围的内容：

  element.html（＆LT; D​​IV＆GT;＆LT;跨度NG点击='selectDay（）'＆GT;一些测试内容与LT; / SPAN＆GT;＆LT; / DIV＆gt;中）;
$编译（element.contents（））（范围）;
 

小提琴

I have a directive with dynamic text. I want to be able to have ng-click directives to call functions from the text. I understand the best way to do this is to compile the html into a template. But when I try to do this I get into an infinite loop:

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

解决方案

You need to change the way you are compiling. First give the element the content, and then compile its content with the scope:

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

Fiddle

这篇关于在指令角编译似乎进入无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！