$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>

从上面的指令结构中，我正在尝试基于someCondition 属性呈现'widget-dir'。

待办事项我从<filter-dir> 发出事件并在widget-dir 中捕获事件，这不起作用。

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

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

• ng-if 创建新范围。 但是根据角度doc，新创建的作用域会继承自父作用域。

  那么，它应该共享body-dir 范围吗？ 如果它是共享的，那么无论我们从<filter-dir> 发出事件，都应该在widget-dir 中捕获？

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

我知道$emit 事件的目的是在父级中捕获事件。 早些时候，我在兄弟范围内捕获了该事件，因为它从父范围共享（这是最佳实践吗？）。

更新： 我注意到还有一件事，如果我将ng-if 放在指令子元素上（而不是指令），那么它会按预期工作。 在下面的代码中，我将ng-if 放在模板元素上。 在这里，我只是想了解角度范围如何与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 在你的控制器中做：

$rootScope.$broadcast('PHOTO_UPLOADED', 照片);

在你的指令中，通过

捕捉广播事件

$rootScope.$on('PHOTO_UPLOADED', function(event, data) { 缩略图 = 数据； });