Question

这似乎是一个愚蠢的问题，但几乎要花整整3个小时，但仍然无法弄清楚我在这里做错了什么。可能有人可以指出原因以及如何解决此问题（我觉得这很容易解决，但仍然看不到）。事情就这样了，我将this javascript库集成到了angularJS应用程序中。我使用了一个有角的factory来向需要的地方提供此服务，因此我可以将其绑定到单个按钮单击事件，并启动集成库的功能。现在，我需要从此工厂函数使用的controller中获取一些值作为参数，并将这些值从factory传递到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控制器

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

使用此mainCtrl的HTML

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

错误

angular.js：14110错误：[$ injector：unpr]未知提供程序：widthProvider <-width <-imageEditorCtrl 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 [获取时（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)可以确认宽度和高度是否正确设置，并涉及到控制器，但是问题在于所提供的错误，第三方库的全部功能都崩溃了（不会发起）。没有width，height参数就可以正常工作

Answer 1

似乎问题出在依赖注入。

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

Answer 2

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

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

您创建了服务imageEditorService，但需要将其注入到控制器中：

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


function imageEditorCtrl(imageEditorService) {

您不能将'height'和'width'注入到控制器中，因为它们不是'provider'，正如您的错误所暗示的那样。要在控制器中使用该服务，请致电：

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，这引起了问题。只是将构建流程与相同的controller混淆，该HTML Element绑定到templateHTML两次。因此，只需从<div ng-controller="imageEditorCtrl">  <div style="width:80vw; height: 500px"> <div id="tui-image-editor-container"></div> </div> </div>文件中删除控制器绑定，即可解决问题。

上一个模板URL文件

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

固定版本

cdata

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

3 个答案: