4

I'm going to do my best to explain my issue - bear with me.

This whole thing is a directive for file selection:

enter image description here

The directive has an ng-transclude component that contains a few directives, contained in their own divs.

Parent directive:

<div class="extra-cells">
    <div ng-transclude class="extra-cells-row"></div>
</div>

ng-transclude content:

<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 content(visual):

enter image description here

The click event in the offending (dropbox) directive fires when I click anywhere in the highlighted section.

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

enter image description here

The question is, naturally, what is causing it to trigger and how do I make it stop. It should trigger only when the element with the dropbox directive is clicked.

5
  • What should be the case according to your needs?
    – softvar
    May 29, 2015 at 19:53
  • I should have asked a question in my question, huh. It should trigger only when the element which has the directive is clicked.
    – Tantelope
    May 29, 2015 at 19:55
  • Try removing the replace property on the dropbox directive
    – Cory Silva
    May 29, 2015 at 19:56
  • @CorySilva I hoped you were right, but nope.
    – Tantelope
    May 29, 2015 at 20:00
  • 1
    I could help you if it is possible to have the running code, either on plunkr.co or your choice.
    – softvar
    May 29, 2015 at 20:03

1 Answer 1

2

Removing the input element inside the directive seems to have "fixed" the problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.