我有新的要求要实现,所以我必须根据条件呈现指令。
<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-如果它工作正常。
以下是我从各种来源了解到的:
但是根据 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
最佳答案
选项1:
当您发出它时,它可能不在 DOM 中。如果可以,请尝试 ng-show。
选项 2:
$broadcast 而不是 $emit
在您的 Controller 中执行以下操作:
$rootScope.$broadcast('PHOTO_UPLOADED', photo);
并在您的指令中,通过以下方式捕获广播事件
$rootScope.$on('PHOTO_UPLOADED', function(event, data) { thumbnail = data; });
关于angularjs - $emit 事件不适用于 ng-if,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45522617/