angularjs - $emit 事件不适用于 ng-if

Question

我有新的要求要实现，所以我必须根据条件呈现指令。

<div ng-app="myApp">

  <body-dir>

    <icon-dir> 
    </icon-dir>

    <filter-dir>
     </filter-dir>

    <widget-dir ng-if="someCondition">
    </widget-dir>

  </body-dir>
</div>

从上面的指令结构，我试图呈现 'widget-dir'基于 someCondition属性(property)。

Todo 我从 <filter-dir> 发出事件并在 widget-dir 中捕捉事件这是行不通的。

如果我删除 ng-如果它工作正常。

以下是我从各种来源了解到的:

ng-if 创建新的作用域。
但是根据 Angular doc ，新创建的范围将从父级继承。

所以，它应该共享 body-dir范围？
如果它是共享的，那么无论我们从 <filter-dir> 发出什么事件，应该赶在widget-dir ?

如果我删除 ng-if，上述功能工作正常.
在这里，我无法理解到底发生了什么。

我知道 $emit事件目的是在父级中捕获事件。
早些时候，我在同级中捕获了该事件，因为它从父作用域共享(这是最佳实践吗？)。

更新:这里还有一件事我注意到，如果我把 ng-if在指令子元素上(不是指令)然后它按预期工作。
在下面的代码中，我输入了 ng-if在模板元素上。
在这里，我只是想了解 Angular 范围如何与 ng-if 一起使用.

angular.module('app').directive('widgetDir', function(){
  return {
    template: '<br><span ng-if="true">I\'m in "ng-if"</span>',
    link: function(scope, element, attrs){
  scope.$on('evt-filter', function(evt, data){
    alert(data);
  });
    }
  }
})

任何人都可以请清除这一点。

问题可重现 here

Answer 1

选项1:
当您发出它时，它可能不在 DOM 中。如果可以，请尝试 ng-show。

选项 2:

$broadcast 而不是 $emit
在您的 Controller 中执行以下操作:

$rootScope.$broadcast('PHOTO_UPLOADED', photo);

并在您的指令中，通过以下方式捕获广播事件

$rootScope.$on('PHOTO_UPLOADED', function(event, data) { thumbnail = data; });