$emit 事件不适用于 ng-if

Posted 2023-02-19

【中文标题】$emit 事件不适用于 ng-if

【英文标题】：$emit event not working with ng-if

【发布时间】：2018-01-13 07:49:15

【问题描述】：

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

<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

【参考方案1】：

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

选项 2：

$broadcast 而不是 $emit 在你的控制器中做：

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

在你的指令中，通过

捕捉广播事件

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

【讨论】：

@option1：如果我放 ng-show 它将起作用，因为它不会从 ng-if 所在的 Dom 中删除并创建新范围。

Dom 元素是否存在我已验证

选项2：如果我想广播事件，我必须将事件发送给父母，并且从父母到孩子必须广播。

还有一件事我不想在 rootcope 上广播该事件。

你能提供 plunker , jsfiddle 的链接吗？