Javascript ng下的指令如果不'；插入DOM时无法重新编译

下面的示例演示了标题中描述的问题：

指令代码：

指令（'translate'，函数（$compile）{ 返回{ 编译：函数（元素）{ var html=element.html（）.split（“”）； 返回函数（范围、元素、属性）{ 功能c（h）{ html（h）； $compile（element.contents（））（范围）； } 如果（属性转换！=''）{ 范围$watch（函数（）{ 返回范围.$eval（attrs.translate） }，函数（val，oldval）{ 如果（val==oldval&&html[2]！==undefined）返回； var p=html[2]； html[2]=gettext（html[0]，html[1]，attrs.add！==未定义的？val+attrs.add:attrs.subtract！==未定义的？val-attrs.subtract:val）； 如果（p！=html[2]）c（html[2]）； }); }else c（gettext（html[0]）； } } } }) 因此，问题是当我切换回指令以显示

ng if

-它可能无法通过重新编译（？）完全重置，因此它会导致错误行为。
如何跟踪何时从DOM中插入和删除指令？如果有办法的话，我可以用一个指示器来解决这个问题。但一定有更好的办法，对吧？

这样解决：

.directive('translate', function($compile) {
  return {
    compile: function(element, attrs) {
      if (attrs.translate == '') {
        element.html(gettext(element.html()));
        return;
      }
      attrs.html = element.html().split('<br plural="">');
      return {
        post: function (scope, element, attrs) {
          delete attrs.html[2];
          scope.$watch(function () {
            return scope.$eval(attrs.translate);
          }, function (val) {
            var p = attrs.html[2];
            attrs.html[2] = gettext(attrs.html[0], attrs.html[1], attrs.add !== undefined ? val + attrs.add : attrs.subtract !== undefined ? val - attrs.subtract : val);
            if (p == attrs.html[2]) return;
            element.html(attrs.html[2]);
            $compile(element.contents())(scope);
          });
        }
      }
    }
  }
})

指令（'translate'，函数（$compile）{ 返回{ 编译：函数（元素、属性）{ 如果（attrs.translate==''）{ html（gettext（element.html（））； 返回； } attrs.html=element.html（）； 返回{ post：功能（范围、元素、属性）{ 删除attrs.html[2]； 范围：$watch（函数（）{ 返回范围：$eval（attrs.translate）； }，功能（val）{ var p=attrs.html[2]； attrs.html[2]=gettext（attrs.html[0]，attrs.html[1]，attrs.add！==未定义？val+attrs.add:attrs.subtract！==未定义？val-attrs.subtract:val）； if（p==attrs.html[2]）返回； html（attrs.html[2]）； $compile（element.contents（））（范围）； }); } } } } })

---

我认为我已经对它进行了充分的优化，但是请随意更正代码。

你能用ng show吗？@Mikel21:有些情况下我想优化并使用

ng if

，比如有许多不同的选择，一次只需显示一个，所以这不是一个解决方案。它随

ng show

一起存在是有目的的。如果您将

compile:function…

更改为

link:function…

@mikelt21:我不知道这会如何工作，它也会与您的原始代码一起工作。再次参见我的指令中的

compile

，它返回

pre

和

post

链接函数，并在此之前保存未处理的HTML代码。使用

link

函数无法实现同样的效果。啊，好吧，我没有仔细查看您的代码，也没有解释代码应该做什么。以下是我想表达的意思：。我还稍微修改了html结构，以避免重复的html代码。@mikelt21:谢谢你的努力，你给了我一个更优化它的想法。我现在已经更新了代码。@mikelt21:顺便说一句，一旦您在指令内容内使用

ng repeat

移动div，您使用

link

函数的方法将无法按预期工作。看见