Directive under ng-if doesn't get recompiled when inserted in DOM

Question

Here's an example which demonstrates the problem described in the title: https://plnkr.co/edit/Xn1qgYftc5YHMsrGj0sh?p=preview

Directive code:

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

So the problem is when I toggle back directive to show with ng-if - it probably doesn't get fully reseted with recompilation(?) and therefore it causes misbehavior.
How can I track when directive is inserted and removed from DOM? If there's a way then I could solve this with an indicator. But there must be some better way, right?

@mikelt21: There are situations where I want to optimize and to use `ng-if` instead, like having many different choices and only one has to be shown at a time, so that's not a solution. It exists there along `ng-show` for a purpose. — softzer0, Feb 23 '17 at 16:04

softzer0 · Accepted Answer · 2017-02-23T19:39:51.973

0

Solved it like this:

.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

I think I've optimized it well enough, but feel free to correct the code.

edited Feb 23 '17 at 19:39

answered Feb 23 '17 at 16:23

softzer0

445
2
7
25

also works with your original code if you change `compile: function...` to `link: function...` – mikelt21 Feb 23 '17 at 16:37
@mikelt21: I'm not seeing how that would work. See once again `compile` in my directive, it returns `pre` and `post` link functions and saves the unprocessed HTML code before that. The same can't be achieved with `link` function. – softzer0 Feb 23 '17 at 16:45
ah okay, i didn't look at your code that closely and there wasn't an explanation of what the code was supposed to do. here's what i was trying to get at: [link](https://plnkr.co/edit/kYuf4iSPOuTxNGXVziEn?p=preview). i also changed the html structure a little to avoid duplicate html code. – mikelt21 Feb 23 '17 at 18:22
@mikelt21: Thanks for your effort, you gave me an idea to optimize it more. I've updated the code now. – softzer0 Feb 23 '17 at 18:48
@mikelt21: By the way, your approach with `link` function won't work as expected once you move div with `ng-repeat` within the content of the directive. See [this](http://stackoverflow.com/questions/42327008/ng-repeat-doesnt-work-when-html-is-altered-under-compile). – softzer0 Feb 23 '17 at 18:52

Directive under ng-if doesn't get recompiled when inserted in DOM

1 Answers1