javascript - AngularJS - 親の任意の場所がクリックされると、クリック イベント (ディレクティブ内) がトリガーされます。

Question

問題を説明するために最善を尽くしますが、ご容赦ください。

この全体が、ファイル選択のディレクティブです。

ディレクティブには、独自の div に含まれるいくつかのディレクティブを含む ng-transclude コンポーネントがあります。

親ディレクティブ:

<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
  };
});

問題は、当然のことながら、何が原因でそれが引き起こされ、どうすればそれを止めることができるかということです。ドロップボックス ディレクティブを持つ要素がクリックされたときにのみトリガーする必要があります。