Javascript 将值从工厂传递到控制器angularJS

这可能看起来是个愚蠢的问题，但它几乎花了整整3个小时，但仍然无法找出我在这里做错了什么。可能有人会指出原因以及如何解决这个问题（我觉得这是一个简单的解决方案，但仍然看不到）。问题是，我将

javascript

库集成到

angularJS

应用程序中。我使用angular

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

图像编辑器控制器

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

})();

(function(){
"use strict";

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

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

主控制器

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

})();

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

打开

错误

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

})();

(function(){
"use strict";

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

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

---

angular.js:14110错误：[$injector:unpr]未知提供程序：widthProvider您的代码有几个问题，但您需要了解的主要问题是angularJS中的依赖项注入（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，请使用您的工厂/服务

一些提示：确保您了解控制器和服务/工厂/提供商之间的区别。另外，要熟悉控制器的生命周期，例如内置init hook：

---

.

问题似乎在于依赖注入

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

---

最后我解决了，我做了一件非常非常愚蠢的事情，我怀疑这只是一个简单的解决办法。我只是将

控制器

再次绑定到

模板HTML

，这就导致了问题。它只是将构建流与绑定到

HTML元素两次的同一
控制器混为一谈。因此，只要从
templateHTML
文件中删除控制器绑定，就可以解决这个问题

上一个模板URL文件

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


您似乎没有正确理解这个问题。我使用这个工厂来启动图像编辑器。因此，它可以轻松地注入任何控制器，使用它，我可以在任何需要的地方实例化图像编辑器。顺便说一句，我知道控制器/服务/工厂和供应商之间的区别。通过这种方式，我可以将值传递给控制器，该控制器是绑定到工厂的控制器，但当我使用此方法传递值时，图像编辑器实例化中断了一些操作。我如何看待这个问题似乎并不清楚，我将更新这个问题。这些值应该来自哪里？从URL？从视图中的输入？@RenatoLucasChitolina我刚刚更新了问题，以便更好地理解。现在你可以比以前更了解这个问题了。你使用的是哪个版本的angularJS？这行的宽度和高度在哪里
imageEditor.setCropRect（宽度，高度）
@GangadharJannu它是角度v-1.7.5和
功能图像编辑器trl（宽度、高度）
这就是它的来源。已经尝试过那些兄弟了，仍然没有运气。
$scope
或
$mdDialog
没有错误，只是
宽度和
高度给出了错误。关于这一点，我将尝试添加一个
plunker
或
fiddle
。这将真正有助于我们调试问题。我已经将一个git回购链接到了相同的错误，您可以参考它。仍然不起作用吗？。你试过我最新的答案了吗？我试过最新的一个伴侣，还是没有运气。宽度和高度未定义。我怀疑它发生在
setTimeout