AngularJSディレクティブイベントリスナーはすべてのインスタンスで起動します

Question

os-image-uploaderというディレクティブを作成して画像をアップロードし、編集してサーバーにアップロードしました。ここで

はテンプレートです：

<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> 

（画像エディタは、私が言うことができるすべての問題を引き起こしていないネストされたディレクティブです）

、ここでは私のディレクティブです：

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

私は、ディレクティブのファイル入力にイベントリスナーを付けるリンク関数を持っています。私はそれを構築し、それをテストしてきた一方で、私はHTMLのみで、それの1つのインスタンスを持っている場合それは素晴らしい仕事をしています

：しかし

<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> 

、私はロゴ画像上のための別のセクションを追加する必要が同じページ。問題は、もっと重要なのは、変更イベントを（私はこれをテストするために使用されていること）とクリックイベントが、彼らは別のスコープを持っていても、両方の要素に発射されていることである

<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> 

：だから私はそれをやりましたイベントがバインドされる要素はそれぞれのディレクティブに含まれます。このクリックイベント（それがどのように役立つかあまりわからない）ため

コンソールログ：

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] 

私はここで間違って何をしているのですか？私はこれについて数日間働いていて、私は本当にそれが私が逃したばかげた何かではないことを願っています。

Answer 1

DOMツリー内に同じid="image_upload"という2つの入力があり、idはドキュメント全体で一意であると想定されます。私はこれがあなたの問題の根本的な原因だと思う。代わりにクラス（または他の属性）を使用する方が良いです。