ngModel - 在格式化程序中插入指令答案

【问题标题】：ngModel - insert directive in formatterngModel - 在格式化程序中插入指令
【发布时间】：2015-07-12 20:42:13
【问题描述】：

我有一个 ngModel，其中一个属性包含 HTML 和一些特殊的占位符，例如：

<p>This is test</p>
[image id="1123"]

在渲染 ngModel 的值之前，我需要将这个特殊的占位符替换为 HTML，例如：

   <div my-directive>
       <img src="/some_image.jpg"/>
    </div>

所以我想在这里有一个指令。我认为我可以为此使用格式化程序。所以我向 ngModel.$formatters 添加了新函数，该函数将与占位符匹配的字符串替换为指令。我的格式化程序如下所示：

function(value){
   var replacedValue = value.replace(regexp, function(match, placeholder){
      var div = document.createElement("div");
      div.appendChild($compile("<div my-directive></div>")(scope));
      return div.innerHTML;
   })

   return replacedValue;
}

问题是当 my-directive 声明了 templateURL 时，模板没有被渲染。仅呈现“”。当我在指令中使用模板时，我得到了整个 HTML 用于渲染的指令，但插值不会被替换，所以例如我得到：

<img ng-src="{{ image.url }}"/>

其他问题是，当指令将一些事件侦听器绑定到元素时，它们不会被触发，据我所知，当调用格式化程序时，此 HTML 不在 DOM 中。

所以问题是：如何正确实现这样的功能？何时将占位符替换为指令？

【问题讨论】：

标签： jquery angularjs

【解决方案1】：

我发现这种方法有什么问题。我过早地尝试编译指令。为了使它工作，占位符替换可以在格式化程序中完成。但是编译应该在 $render 调用中完成。就我而言，$render 函数如下所示：

ngModel.$render = function () {
  element.html(ngModel.$isEmpty(ngModel.$viewValue) ? "" : ngModel.$viewValue);

  if(element.html()) {
    $compile(element.contents())(scope);
  }
};

【讨论】：