определение «кликабельного» с использованием dropzone с контроллерами/шаблонами angular.js, когда кнопка находится в другом контроллере

Я получаю сообщение Ошибка: предоставлена ​​недопустимая опция clickable. теперь, когда я разделил существующие два на две отдельные части, обрабатываемые контроллерами angular

Мне нужно знать, как установить параметр «кликабельный» в одном контроллере с помощью кнопки/элемента, который находится в шаблоне другого контроллера.

КОНТЕКСТ

Я перемещаю инструмент загрузки в angular, и изначально все делалось с помощью одного статического шаблона. Был элемент html «над» контейнером зоны сброса, который используется для «кликабельного» значения, чтобы открыть диалоговое окно файла для зоны сброса, если пользователь не хочет перетаскивать в область/контейнер зоны сброса.

Поскольку эта кнопка теперь является частью другого контроллера с собственным шаблоном, я не могу сразу ссылаться на нее стандартными методами (имя класса было тем, что использовал старый код, но идентификатор элемента тоже не работает)

Предположительно, «ControlsController», который обрабатывает кнопки вверху, не загружен или недоступен по иным причинам, когда DropzoneController пытается создать экземпляр Dropzone. Поэтому мне нужно найти другой способ сделать кнопку доступной для нажатия.

У меня есть глобальный класс angular 'service', доступный сейчас, или я мог бы использовать что-то вроде $rootScope или $broadcast/$emit, но я не совсем уверен, как это сделать и убедиться, что оба элемента доступны при необходимости. Я предполагаю, что, вероятно, смогу установить опцию «кликабельной» dropzone после ее создания, но я не совсем уверен, как это сделать с двух отдельных контроллеров, каждый из которых обрабатывает две разные части пользовательского интерфейса, особенно когда я не могу быть полностью уверен в любом контроллере, когда/если другой экземпляр создан или если он еще доступен.

Я попытался использовать $onInit() для создания новой Dropzone() (в DropzoneController), но все равно пишет Ошибка: предоставлена ​​недопустимая опция clickable

Есть ли способ вытащить определение элемента из шаблона элементов управления внутри компонента/контроллера? Или есть лучший способ вызвать поведение между одним контроллером и другим?

ФРАГМЕНТЫ КОДА

ControlsController привязан к компоненту/элементу в верхней части пользовательского интерфейса.

DropzoneController прикреплен к div, окружающему список файлов изображений пользователя, отображаемых с другими контроллерами angular внутри этого div:

<div id="ImageSelector" class="ImageSelectorS3Window S3FullWindowHeight">

    <selector-controls></selector-controls>

    <div class="ImageSelector List Unselectable dropzone" id="ImageSelectorList" ng-controller="DropzoneController">
            <user-folder ng-repeat="(folder, pseudodir) in subdirs" folder="folder" pseudodir="pseudodir"></user-folder>
            <uploaded-image  ng-repeat="(filename, image) in uploadedImages" filename="filename" image="image"></uploaded-image>
    </div>
</div>

шаблон элементов управления выглядит следующим образом и загружается вместо селекторов-элементов управления в приведенном выше шаблоне:

<div class="ImageSelector" id="ImageSelectorControl">
    <div class="UIBar">
        <img id="ISUpFolder" class="UIButton Transparent" src="images/arrow86.png" title="Go Up a Folder">
        <img id="ISRefresh" class="UIButton" src="images/refresh7.png" title="Refresh">
        <img id="ISCreateFolder" class="UIButton" src="images/new6.png" title="Create Folder">
        <img class="UIButton ImageSelectorUploadButton dz-clickable" src="images/mini.png" title="Upload File(s)">
        <img id="ISMove" class="UIButton Transparent" src="images/custom-move.png" title="Move Selected">
        <img id="ISRename" class="UIButton Transparent" src="images/interface19.png" title="Rename Selected">
        <img id="ISDelete" class="UIButton Transparent" src="images/mini2.png" title="Delete Selected">
        <img id="ISHelp" class="UIButton" src="images/question3.png" title="Help">
    </div>
    <div id="ImageSelectorFolder" class="ImageSelectorFolder" title="Main">Folder: Main</div>
</div>

Текущее значение в параметрах Dropzone для clickable — «.ImageSelectorUploadButton».


angularjs requirejs dropzone
person Scott    schedule 10.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

вместо того, чтобы импортировать в $rootScope, у меня уже есть доступ к нему в службе (поэтому я могу импортировать $rootScope для прямого изменения глобальных настроек или использовать службу для программного изменения этих настроек)

Поскольку в controlController уже внедрена служба settingsService, я создал в сервисе метод BroadcastClickableLoaded():

метод settingsService.js:

broadcastClickableLoaded: function(clickable)
{
    this.$rootScope.$broadcast("clickableLoaded", clickable)
}

затем я дополнительно внедрил $element в класс ControlsController, создал метод $onInit для поиска кликабельного элемента и активировал сервисный метод:

Метод $onInit класса ControlsController

ControlsController.prototype.$onInit = function() {
    let clickable = this.$element.find(".ImageSelectorUploadButton")[0]
    this.settingsService.broadcastClickableLoaded(clickable)
}

Затем в моем контроллере dropzone я могу настроить обработчик событий для перехвата широковещательного события, чтобы создать Dropzone() только тогда, когда контроллер передает (через службу), что он загружен и доступен:

Обработчик событий DropzoneController $on

this.$scope.$on("clickableLoaded", (evt, clickable) => {
    // includes
    //          dropzone area element as first parameter
    //          clickable element as second parameter
    this.createDropzone(this.$element[0], clickable)
})
person Scott    schedule 11.12.2020