Question

我有一个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时，模板不会被渲染。只有＆＃34;＆＃34;被渲染。当我在指令中使用模板时，我得到了渲染指令的整个HTML，但插值不会被替换，所以例如我得到：

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

其他问题是，当指令有一些绑定到元素的事件侦听器时，它们不被触发，我理解，因为当调用格式化程序时，这个HTML不在DOM中。

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

Answer 1

我弄清楚这种方法有什么问题。我太早尝试编译指令。为了使其工作，占位符替换可以在格式化程序中完成。但是编译应该在$ render调用中完成。在我的例子中，$ render函数如下所示：

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

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

ngModel - 在formatter中插入指令

1 个答案: