javascript - 将值从工厂传递到 Controller angularJS

Question

这可能看起来像一个愚蠢的问题，但几乎花了整整 3 个小时，但仍然无法弄清楚我在这里做错了什么。可能有人可以指出原因以及如何解决这个问题(我觉得这很容易解决，但仍然看不到)。事情是这样的，我有 this javascript 库集成到 angularJS 应用程序。我使用了一个 Angular factory 来为它需要的地方提供这个服务，所以我可以将它绑定(bind)到一个单一的按钮点击事件，并启动集成库的功能。现在我需要从 controller 中获取一些值作为参数，这个工厂函数使用这些值并将这些值从 factory 传递给 controller 这是 Controller 负责启动第三方库的。这是我到目前为止所拥有的。

This is a git repository with the same error

imageEditor 工厂

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

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

})();

主 Controller

(function(){
"use strict";

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

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

我使用这个 mainCtrl 的 HTML

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

错误

angular.js:14110 Error: [$injector:unpr] Unknown provider: widthProvider <- width <- imageEditorCtrl http://errors.angularjs.org/1.5.9/$injector/unpr?p0=widthProvider%20%3C-%20width%20%3C-%20imageEditorCtrl at http://localhost:1337/vendor/angular/angular.js:68:12 at http://localhost:1337/vendor/angular/angular.js:4554:19 at Object.getService [as get] (http://localhost:1337/vendor/angular/angular.js:4707:32) at http://localhost:1337/vendor/angular/angular.js:4559:45 at getService (http://localhost:1337/vendor/angular/angular.js:4707:32) at injectionArgs (http://localhost:1337/vendor/angular/angular.js:4732:58) at Object.invoke (http://localhost:1337/vendor/angular/angular.js:4754:18) at $controllerInit (http://localhost:1337/vendor/angular/angular.js:10518:34) at nodeLinkFn (http://localhost:1337/vendor/angular/angular.js:9416:34) at compositeLinkFn (http://localhost:1337/vendor/angular/angular.js:8757:13) undefined

我知道这个错误是由于打字错误引起的，但我不明白为什么会这样。使用 console.log(width+','+height) 我可以确认宽度和高度设置正确并且它到达 Controller ，但问题在于提供的错误，整个功能第三方库出现故障(根本无法启动)。没有宽度，高度参数它工作得很好

Answer 1

似乎问题出在依赖注入(inject)上。

如下更改您的 imageEditor Controller 定义

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