AngularJS Directive事件监听器在所有实例上触发

Question

I created a directive os-image-uploader to upload images then edit them and upload them to my server.

Here's the template:

<label for="image_upload" class="image-upload-button"><span>Choose an image</span></label>
<input type="file" name="image_upload" id="image_upload" accept=".gif, .jpg, .png">

<image-editor id="image" ng-if="image.imageData.length > 0" image="{{image.imageData}}" selection-width="{{selectionWidth}}" selection-height="{{selectionHeight}}" width="{{width}}" height="{{height}}" controls="osImage.controls" state="image.state"></image-editor>

(the image editor is a nested directive which isn't causing any problems that I can tell)

and here's my directive:

(function(angular) {
  'use strict';

  angular
    .module('AwareClientApp')
    .directive('osImageUploader', function() {
      return {
        restrict: 'E',
        templateUrl: 'scripts/components/os-image-uploader/os-image-uploader.html',
        scope: {
          selectionHeight: '@',
          selectionWidth: '@',
          width: '@',
          height: '@',
          url: '@',
          imageId: '@',
          type: '@',
          image: '='
        },
        controllerAs: 'osImage',
        controller: imageUploaderController,
        link: function(scope, element) {
          var input = element.find('#image_upload');
          element.on('click', function (e) {
            console.log(e);
            console.log('clicked');
            console.log(scope);
            console.log(element);
          });
           function readFile = () {
            if (scope.input[0].files && scope.input[0].files[0]) {
              var filereader = new FileReader();
              filereader.onload = function(e) {
                scope.image.imageData = e.target.result;
                scope.$root.$apply();
              };
              filereader.readAsDataURL(scope.input[0].files[0]);
            }
          }

          input.addEventListener('change', readFile);
        }
      };
    });

I have a link function that attaches an event listener to the file input in the directive.

It's been working great while I've been building it and testing it when I only have one instance of it in the html:

<md-content class="md-padding input-tab-content images-edit" ng-if="!tabImages.isDisabled">
        <div class="header">
            <h1>Header</h1>
            <div layout="row" layout-sm="column" layout-align="space-around" ng-if="tabImages.loadingHeaderImage">
                <md-progress-circular class="md-primary" md-diameter="60px" md-mode='indeterminate'>
                </md-progress-circular>
            </div>
            <div class="header-image-container">
                <img ng-src="{{tabImages.images.header.url}}" style="top: {{tabImages.images.header.newCrop.top}}px; left: {{tabImages.images.header.newCrop.left}}px; width: {{tabImages.images.header.newCrop.width}}px;" alt="header-image" class="header-image"/>
            </div>
            <h4>header url: {{tabImages.images.header.url}}</h4>

            <os-image-uploader selection-width="400" selection-height="196" width="400" height="196" image-id="{{tabImages.images.header.id}}" type="header" image="tabImages.imageReference.header" input="tabImages.imageReference.header.input"></os-image-uploader>

        </div>
    </md-content>

However, I needed to add another section for a logo image on the same page. So I did that:

<md-content class="md-padding input-tab-content images-edit" ng-if="!tabImages.isDisabled">
        <div class="logo">
            <h1>Logo</h1>
            <div layout="row" layout-sm="column" layout-align="space-around" ng-if="tabImages.loadingLogoImage">
                <md-progress-circular class="md-primary" md-diameter="60px" md-mode='indeterminate'>
                </md-progress-circular>
            </div>
            <div class="logo-image-container">
                <img ng-src="{{tabImages.images.logo.url}}" style="" alt="logo-image" class="logo-image"/>
            </div>
            <h4>logo url: {{tabImages.images.logo.url}}</h4>

            <os-image-uploader selection-width="400" selection-height="88" width="400" height="88" image-id="{{tabImages.images.logo.id}}" type="logo" image="tabImages.imageReference.logo" input="tabImages.imageReference.logo.input"></os-image-uploader>

        </div>

        <div class="header">
            <h1>Header</h1>
            <div layout="row" layout-sm="column" layout-align="space-around" ng-if="tabImages.loadingHeaderImage">
                <md-progress-circular class="md-primary" md-diameter="60px" md-mode='indeterminate'>
                </md-progress-circular>
            </div>
            <div class="header-image-container">
                <img ng-src="{{tabImages.images.header.url}}" style="top: {{tabImages.images.header.newCrop.top}}px; left: {{tabImages.images.header.newCrop.left}}px; width: {{tabImages.images.header.newCrop.width}}px;" alt="header-image" class="header-image"/>
            </div>
            <h4>header url: {{tabImages.images.header.url}}</h4>

            <os-image-uploader selection-width="400" selection-height="196" width="400" height="196" image-id="{{tabImages.images.header.id}}" type="header" image="tabImages.imageReference.header" input="tabImages.imageReference.header.input"></os-image-uploader>

        </div>
    </md-content>

The problem is that the click event (that I have been using to test this) and, more importantly, the change event are fired on both elements even though they have separate scopes and the elements that the event are bound to are in their respective directives.

Console log for this click event (not sure how much it helps):

os-image-uploader.js:46 j…y.Event {originalEvent: MouseEvent, type: "click", timeStamp: 8562.660000000002, jQuery2240034688928910062033: true, toElement: label.image-upload-button…}
os-image-uploader.js:49 clicked
os-image-uploader.js:50 Scope {$id: 837, $$childTail: null, $$childHead: null, $$prevSibling: Scope, $$nextSibling: null…}
os-image-uploader.js:51 [os-image-uploader.ng-isolate-scope, context: os-image-uploader.ng-isolate-scope]
os-image-uploader.js:46 j…y.Event {originalEvent: MouseEvent, type: "click", timeStamp: 8562.660000000002, jQuery2240034688928910062033: true, toElement: input#image_upload…}
os-image-uploader.js:49 clicked
os-image-uploader.js:50 Scope {$id: 836, $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: Scope…}
os-image-uploader.js:51 [os-image-uploader.ng-isolate-scope, context: os-image-uploader.ng-isolate-scope]

What am I doing wrong here? I've been working for days on this and I really hope it's not something stupid that I've missed.

Answer 1

You end up having two inputs with the same id="image_upload" in the DOM tree while id is supposed to be unique in the entire document. I think this is the root cause of your problems. It's better to use classes instead (or other attributes).