指令NG-如果DOM

Question

插入時不會被重新編譯下面是這證明了標題所述問題的例子：https://plnkr.co/edit/Xn1qgYftc5YHMsrGj0sh?p=preview

指令代碼：

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

所以問題是當我切換回指令以顯示ng-if - 它可能不會被重新編譯（？）完全重置，因此它會導致錯誤行爲。
如何跟蹤何時插入指令並將其從DOM中刪除？如果有辦法，我可以用指標解決這個問題。但是一定有更好的辦法，對吧？

Answer 1

解決這樣的：

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

Live example

我想我已經優化的不夠好，但隨時更正代碼。