0
Я создал директиву os-image-uploader, чтобы загрузить изображения, затем отредактировать их и загрузить их на свой сервер.AngularJS Directive event прослушиватель во всех случаях
Вот шаблон:
<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>
Проблема заключается в том, что событие щелчка (который я использую, чтобы проверить это), и, что более важно, событие изменения обжигается на обоих элементах, даже если они имеют отдельные области действия и элементы, связанные с событием, находятся в их соответствующих директивах.
консоли журнала для этого события нажатия (не знаю, сколько это помогает):
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]
Что я делаю неправильно здесь? Я работаю в течение нескольких дней на этом, и я действительно надеюсь, что это не что-то глупое, что я пропустил.
Как вы вызываете событие click?! –