AngularJS - 单击父项中的任何位置时触发单击事件(在指令中)
AngularJS - Click event (in directive) triggers when anywhere in the parent is clicked
我会尽力解释我的问题 - 请耐心等待。
这整件事是一个文件选择指令:
该指令有一个 ng-transclude 组件,其中包含一些指令,包含在它们自己的 div 中。
父指令:
<div class="extra-cells">
<div ng-transclude class="extra-cells-row"></div>
</div>
ng-transclude 内容:
<div file-upload-directive>
<div bo-if="config.drive">
<div google-picker>
<div>Google Drive</div>
</div>
</div>
<div bo-if="config.dropbox">
<div dropbox-chooser>
<div>Dropbox</div>
</div>
</div>
<div bo-if="config.link">
<div ng-click="selectLink()">
<div>Paste a link</div>
</div>
</div>
</div>
ng-transclude 内容(视觉):
当我在突出显示部分中的任意位置单击时,违规 (dropbox) 指令中的单击事件将被触发。
dropboxChooserModule.directive('dropboxChooser', function(dropboxChooserService) {
return {
priority: 1,
restrict: 'EA',
transclude: true,
scope: {
widget: '=',
options: '=',
extensions: '=',
},
template: '<div class="">' +
'<div ng-transclude></div>' +
'<input type="dropbox-chooser" name="selected-file"/></div>',
link: function postLink(scope, element, attrs) {
element.bind("click", function(event) {
dropboxChooserService.choose({
success: function(files) {},
cancel: function() {}
})
});
},
replace: true
};
});
问题自然是什么导致它触发以及如何让它停止。它应该仅在单击带有 dropbox 指令的元素时触发。
删除指令中的输入元素似乎有"fixed"问题。
我会尽力解释我的问题 - 请耐心等待。
这整件事是一个文件选择指令:
该指令有一个 ng-transclude 组件,其中包含一些指令,包含在它们自己的 div 中。
父指令:
<div class="extra-cells">
<div ng-transclude class="extra-cells-row"></div>
</div>
ng-transclude 内容:
<div file-upload-directive>
<div bo-if="config.drive">
<div google-picker>
<div>Google Drive</div>
</div>
</div>
<div bo-if="config.dropbox">
<div dropbox-chooser>
<div>Dropbox</div>
</div>
</div>
<div bo-if="config.link">
<div ng-click="selectLink()">
<div>Paste a link</div>
</div>
</div>
</div>
ng-transclude 内容(视觉):
当我在突出显示部分中的任意位置单击时,违规 (dropbox) 指令中的单击事件将被触发。
dropboxChooserModule.directive('dropboxChooser', function(dropboxChooserService) {
return {
priority: 1,
restrict: 'EA',
transclude: true,
scope: {
widget: '=',
options: '=',
extensions: '=',
},
template: '<div class="">' +
'<div ng-transclude></div>' +
'<input type="dropbox-chooser" name="selected-file"/></div>',
link: function postLink(scope, element, attrs) {
element.bind("click", function(event) {
dropboxChooserService.choose({
success: function(files) {},
cancel: function() {}
})
});
},
replace: true
};
});
问题自然是什么导致它触发以及如何让它停止。它应该仅在单击带有 dropbox 指令的元素时触发。
删除指令中的输入元素似乎有"fixed"问题。