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中只有一个实例时，我一直在构建并测试它时工作得很好：

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

问题是click事件（我一直用来测试它），更重要的是，更改事件都会在两个元素上触发，即使它们有单独的范围，并且事件绑定的元素在他们各自的指示。

此点击事件的控制台日志（不确定它有多大帮助）：

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"的输入，而id应该在整个文档中是唯一的。我认为这是你问题的根本原因。最好使用类（或其他属性）。

AngularJS指令事件侦听器将在所有实例上触发

1 个答案: