Передача значений с завода на контроллер angularJS

Question

Это может показаться глупым вопросом, но это занимает почти 3 часа, но все равно не могу понять, что я здесь сделал неправильно.Возможно, кто-то может указать причину и как исправить эту проблему (я чувствую, что это легко исправить, но все еще не мог видеть это).Так вот, у меня есть эта javascript библиотека, интегрированная в angularJS приложение.Я использовал угловое значение factory для предоставления этой услуги там, где это необходимо, поэтому я могу связать ее с одним нажатием кнопки и запустить функции встроенной библиотеки.Теперь мне нужно взять некоторые значения в качестве параметров из controller, которые использует эта фабричная функция, и передать эти значения из factory в controller, который является контроллером, отвечающим за запуск сторонней библиотеки.вот что у меня так далеко.

Это git-репозиторий с той же ошибкой

imageEditor factory

(function() {
    'use strict';

    angular.module('appEdit').factory('imageEditorService', [
        '$mdDialog',imageEditorService
    ]);

    function imageEditorService($mdDialog) {
        return {

            showImageEditorDialog: function (_width,_height) {

                return $mdDialog.show({
                    controller: 'imageEditorCtrl',
                    templateUrl: './imageEditor.html',
                    clickOutsideToClose: true,
                    locals: {
                        initialData: null,
                        width: _width,
                        height: _height
                    }
                });
            },
        };
    }
})();

Контроллер imageEditor

(function() {
    'use strict';
    angular.module("appEdit").controller("imageEditorCtrl" , ['width','height',imageEditorCtrl]);


    function imageEditorCtrl(width,height) {
        //this outputs the width, height passed to this properly
        console.log(width+','+height);

        setTimeout(
            () => {

                var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
                    includeUI: {
                        loadImage: {
                            path: './images/imageEditor/test.png',
                            name: 'SampleImage'
                        },
                        theme: blackTheme,
                        initMenu: 'crop',
                        menuBarPosition: 'bottom'
                    },
                    cssMaxWidth: 700,
                    cssMaxHeight: 300
                });

                // this is where I need the width, height should be bound
                imageEditor.setCropRect(width,height);

                window.onresize = function () {
                    imageEditor.ui.resizeEditor();
                }

            }
            , 1000)
    };

})();

mainController

(function(){
"use strict";

angular.module('appEdit')
    .controller('mainCtrl', ['$scope','imageEditorService', function ($scope, imageEditorService) {

        $scope.openImageEditorDialog = function (width, height) {
            imageEditorService.showImageEditorDialog(width, height);
    };
    }]);
 })();

HTML, где я использовал этоmainCtrl

<div ng-controller="mainCtrl">
    <md-button ng-click="openImageEditorDialog(400,200)">Open</md-button>
</div>

Ошибка

angular.js: 14110 Ошибка: [$ инжектор: unpr] Неизвестный поставщик: widthProvider <- ширина<- imageEditorCtrl <a href="http://errors.angularjs.org/1.5.9/" rel="nofollow noreferrer">http://errors.angularjs.org/1.5.9/$injector/unpr?p0=widthProvider%20%3C-%20width%20%3C-%20imageEditorCtrl в http://localhost:1337/vendor/angular/angular.js:68:12 в http://localhost:1337/vendor/angular/angular.js:4554:19 в Object.getService [as get] (http://localhost:1337/vendor/angular/angular.js:4707:32) в http://localhost:1337/vendor/angular/angular.js:4559:45 в getService (http://localhost:1337/vendor/angular/angular.js:4707:32) atjectionArgs (http://localhost:1337/vendor/angular/angular.js:4732:58) в Object.invoke (http://localhost:1337/vendor/angular/angular.js:4754:18) в $ controllerInit (http://localhost:1337/vendor/angular/angular.js:10518:34) в nodeLinkFn (http://localhost:1337/vendor/angular/angular.js:9416:34) в композитныйLinkFn (*)1066 * undefined

Я знаю, что эта ошибка возникает при опечатке, но здесь я не могу понять, почему это происходит. с console.log(width+','+height) Я могу подтвердить, что ширина и высота установленыправильно и дело доходит до контроллера, но прпроблема с предоставленной ошибкой, весь функционал сторонней библиотеки нарушается (она вообще не запускается).без параметров ширины, высоты это работает просто отлично

Answer 1

Похоже, проблема в инъекции зависимостей.

Измените определение контроллера imageEditor, как показано ниже

(function () {
    'use strict';
    angular.module("appEdit").controller("imageEditorCtrl", [imageEditorCtrl]);

    function imageEditorCtrl($scope, $mdDialog, initialData, width, height) {
        this.$onInit = function () {
            var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
                includeUI: {
                    loadImage: {
                        path: './images/imageEditor/test.png',
                        name: 'SampleImage'
                    },
                    theme: blackTheme,
                    initMenu: 'crop',
                    menuBarPosition: 'bottom'
                },
                cssMaxWidth: 700,
                cssMaxHeight: 300
            });

            // this is where I need the width, height should be bound
            imageEditor.setCropRect(width, height);

            window.onresize = function () {
                imageEditor.ui.resizeEditor();
            }
        }
    };
})();

Answer 2

Наконец-то я разобрался, я сделал действительно очень глупую вещь, и, как я и подозревал, это было легко исправить.Я просто связываю controller снова с templateHTML, и это вызывает проблему.это просто путает процесс сборки с тем же controller, который связывается с HTML Element дважды.Так что, просто удалив привязку контроллера из файла templateHTML, просто исправьте проблему.

предыдущий файл templateURL

<div ng-controller="imageEditorCtrl"> <!--this line which causes the problem with controller bind-->
    <div style="width:80vw; height: 500px">
        <div id="tui-image-editor-container"></div>
    </div>
</div>

фиксированная версия

<div>
    <div style="width:80vw; height: 500px">
        <div id="tui-image-editor-container"></div>
    </div>
</div>

Answer 3

Есть несколько проблем с вашим кодом, но главное, что вам нужно, - это Dependency Injection (DI) в angularJS:

https://docs.angularjs.org/guide/di

Вы создали свой сервис imageEditorService, но вам нужно внедрить его в ваш контроллер:

angular.module("appEdit").controller("imageEditorCtrl" , ['imageEditorService',imageEditorCtrl]);


function imageEditorCtrl(imageEditorService) {

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

imageEditorService.showImageEditorDialog(height, width); // Specify the height and width. 

Тем не менее, я не уверен, что вы хотите сделать в вашем контроллере.Вы хотите создать новый tui.ImageEditor или использовать свой imageEditorService?

Если вы хотите использовать tui.ImageEditor, используйте для этого фабрику / сервис.

Несколько советов: убедитесь, что вы понимаете разницу между контроллерами и сервисами / фабриками / провайдерами.Кроме того, ознакомьтесь с жизненным циклом контроллера, таким как встроенный обработчик инициализации:

Каков жизненный цикл контроллера AngularJS? .