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

Question

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

This is a git repository with the same error

图像编辑器工厂

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

我使用这个 mainCtrl 的 HTML

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

错误

angular.js:14110 错误：[$injector:unpr] 未知提供者：widthProvider 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) 在 injectionArgs (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) 在compositeLinkFn (http://localhost:1337/vendor/angular/angular.js:8757:13) 未定义

我知道这个错误是由拼写错误引起的，但在这里我不明白为什么会发生这种情况。 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

你的代码有几个问题，但你需要解决的主要问题是 angularJS 中的依赖注入（DI）：

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，请使用您的工厂/服务来执行此操作。

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

What is the lifecycle of an AngularJS Controller?.

Answer 3

最后我解决了，我做了一件非常非常愚蠢的事情，而且我怀疑这只是一个简单的修复。我只是将controller 再次绑定到templateHTML，这就导致了问题。它只是将构建流程与绑定到HTML Element 两次的相同controller 混淆。因此，只需从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>