Weird ngIf + $compile behavior

Question

I'm trying to build a directive that would do the following:

• add another directive to the element (ngSwipeRight for example)
• add some custom behavior to the new directive.

An example would be: mySwipeBack that would add ngSwipeRight and when the user swipes over the element I would do history.back().

I tried like this:

.directive('swipe', function($compile){
  return {
    restrict: 'A',
    compile: function(el){
        // I removed all the actual logic for demo purposes
        // here I would add ng-swipe-right plus a handler
        el.removeAttr('swipe');
        var fn = $compile(el);
        return function (scope) {
          fn(scope);
        };
   }
 }
});

But I ran into an issue with the following markup:

<div ng-if='true'>
  <h1 swipe>OUTSIDE
    <div ng-if="true">INSIDE</div>
  </h1>
</div>

The "INSIDE" text doesn't get rendered. You can see the behavior in this jsbin: http://jsbin.com/tokofevuga/edit?html,js,output

If I remove the first ng-if, it works as intended.

Does anyone know what the reason is behind this - and if I can make it work?

Or if someone has another idea of how to achieve what I described above?

Answer 1

    return function (scope) {
      $compile(el)(scope);
    };

Work for me ... And the point is that in your code - you compile element immediately in directive compile, while here function is returned from compile, that will be executed somewhen later.