奇怪的ngIf + $编译行为

Question

我正在尝试构建一个执行以下操作的指令:

• 向元素添加另一个指令(例如ngSwipeRight)
• 向新指令添加一些自定义行为.

一个例子是:mySwipeBack将添加ngSwipeRight,当用户滑过我将要做的元素时history.back().

我试过这样的:

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

但是我遇到了以下标记的问题:

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

"INSIDE"文本无法呈现.你可以在这个jsbin中看到这个行为:http://jsbin.com/tokofevuga/edit？html,js,output

如果我删除第一个ng-if,它按预期工作.

有谁知道这背后的原因是什么 - 如果我可以使它工作？

或者如果有人对如何实现上述描述有另一种想法？

Answer 1

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

为我工作......重点是在你的代码中 - 你在编译中立即编译元素,而这里的函数从编译返回,稍后将执行.