将值从工厂传递到控制器angularJS [英] Passing Values from a factory to controller angularJS
问题描述
这可能看起来像一个愚蠢的问题，但它几乎需要整整3个小时，但仍然无法弄清楚我在这里做错了什么。可能有人可以指出原因以及如何解决这个问题（我觉得这很容易解决，但仍然看不到它）。所以这就是问题，我有
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 Controller
（function（）{
'use strict';
angular.module（appEdit）。controller（imageEditorCtrl，['width'， 'height'，imageEditorCtrl]）;
函数imageEditorCtrl（width，height）{
//这会输出传递给这个正确的
控制台的宽度，高度。 log（width +'，'+ height）;
setTimeout（
（）=> {
var imageEditor = new tui.ImageEditor（'＃tui- image-editor-container'，{
includeUI：{
loadImage：{
path：'。/ images / imageEditor / test.png'，
name：'SampleImage'
}，
主题：blackTheme，
initMenu：'crop'，
menuBarPosition：'bottom'
}，
cssMaxWidth：700，
cssMaxHeight：300
}）;
//这是我需要的宽度，高度应该绑定
imageEditor.setCropRect（width，height）;
window.onresize = function（）{
imageEditor.ui.resizeEditor（）;
}
}
，1000）
};
}）（）;
mainController
（function（）{
use strict;
angular.module（'appEdit'）
.controller（'mainCtrl '，['$ scope'，'imageEditorService'，函数（$ scope，imageEditorService）{
$ scope.openImageEditorDialog = function（width，height）{
imageEditorService.showImageEditorDialog（width，高度）;
};
}]）;
}）（）;
我使用此mainCtrl的HTML
< div ng-controller =mainCtrl>
< md-button ng-click =openImageEditorDialog（400,200）>打开< / 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
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（< a href =http：// localhost：1337 / vendor / angular / angular.js：4732：58 =nofollow noreferrer> http：// localhost：1337 / vendor / angular / angular.js：4732：58 ）Object.invoke上的
（ http：// localhost：1337 / vendor / angular / angular.js：4754：18 ）
at $ 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 ）undefined
我知道这个错误出现了一个错字的问题，但在这里我不能明白为什么会这样。
与 console.log（宽度+'，'+高度）我可以确认宽度和高度设置正确并且它来到控制器，但是问题在于提供的错误，第三方库的整个功能都被破坏（它根本不会启动）。没有宽度，高度参数它可以正常工作
最后我解决了，我真的做了一个真的愚蠢的事情，因为我怀疑它只是一个简单的解决方案。我只是再次将控制器绑定到 templateHTML ，这就会导致问题。它只是将构建流与相同的控制器混淆，后者绑定到 HTML元素两次。因此，只需从 templateHTML 文件中删除控制器绑定，就可以解决问题。
以前的templateURL文件
< ; div ng-controller =imageEditorCtrl> <！ - 导致控制器绑定问题的这一行 - >
< 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>
This may look like a silly question, but it almost take an entire 3 hours, but still couldn't figure out what I have done wrong here. Possibly some one can point out the reason and how to fix this issue (I feel this is a easy fix, but still couldn't see it). So here's the matter, I have this javascript library integrated to angularJS application. I used a angular factory to provide this service to where it needs, so I can bind this to a single button click event, and initiate the functionalities of the integrated library. Now I need to take some values as parameters from the controller this factory function uses and pass those values from the factory to controller which is the controller that responsible for initiate the third party library. here's what I have so far.
This is a git repository with the same error
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 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)
};
})();
mainController
(function(){
"use strict";
angular.module('appEdit')
.controller('mainCtrl', ['$scope','imageEditorService', function ($scope, imageEditorService) {
$scope.openImageEditorDialog = function (width, height) {
imageEditorService.showImageEditorDialog(width, height);
};
}]);
})();
HTML where I used this mainCtrl
<div ng-controller="mainCtrl">
<md-button ng-click="openImageEditorDialog(400,200)">Open</md-button>
</div>
The Error
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
I know this error occurs with a typo kind of issues, but here I can not understand why this occurs.
with console.log(width+','+height) I could confirm the width and height is set properly and it comes to the controller, but the problem is with the provided error, entire functionality of the third party library is breaks down(it won't initiate at all). without the width, height parameters it works just fine
Finally I sort it out, I did a really really stupid thing, and as I was suspecting It was just an easy fix. I just bind the controller again to the templateHTML, and that causes the problem. it's just confuse the build flow with the same controller which binds to a HTML Element twice. So just removing the controller bind from the templateHTML file, just fix the problem.
previous templateURL file
<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>
fixed version
<div>
<div style="width:80vw; height: 500px">
<div id="tui-image-editor-container"></div>
</div>
</div>
这篇关于将值从工厂传递到控制器angularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
