我有一个大问题。 我在ui.bootstrap的模态对话框中遇到了一些问题。 我想做什么。我有一个对话框,用于添加摇杆(这里称为clicker)到我的数据库。当每件事情都没问题时,对话框会关闭,否则会显示错误信息。 一切都在模态对话框的控制器中处理。
由于我使用jwt和socketio,我不得不创建一个返回ppromiss的socketio工厂。为了能够在我的模态控制器中使用socketio-Instance,我必须将它放在$ modal的resolve-Object中。
问题是,每次我将socketio-Eventhandler放入我的模态控制器时,我的浏览器会向我显示我的Controller-Method未定义的消息。 (没有显示对话框,只显示控制台中的错误消息)
这是我的代码。我希望你能帮帮我!我真的不知道如何解决这个问题。
SocketModule.js
SocketModule是我的socketio-Factory,它返回了promise。我的代码中的其他任何地方一切正常。只有我的模态对话框有这种方法的问题。
var SocketioModule = angular.module('SocketioModule', []);
SocketioModule.factory('socket', ['$q', '$rootScope', 'socketFactory', '$timeout', '$location', 'AuthHostService',
function($q, $rootScope, socketFactory, $timeout, $location, AuthHostService) {
// create a promise instance
var socket = $q.defer();
// listen for the authenticated event emitted on the rootScope of
// the Angular app. Once the event is fired, create the socket and resolve
// the promise.
$rootScope.$on('authenticated', function() {
console.log('received broadcast');
var protocol = $location.protocol();
var host = $location.host();
var port = $location.port();
var baseurl = protocol+'://'+host+':'+port;
// resolve in another digest cycle
$timeout(function() {
// create the socket
var newSocket = (function() {
return socketFactory({
ioSocket: io.connect(baseurl, {
'forceNew': true,
'query': 'token=' + AuthHostService.getToken()
})
})
})();
// resolve the promise
socket.resolve(newSocket);
});
});
// return the promise
return socket.promise;
}
]);
ClickerModule.js
'use strict';
var ClickerModule = angular.module('ClickerModule', ['ngAnimate','ui.bootstrap.modal', 'SocketioModule']);
ClickerModule.controller('ClickerManagerCtrl', ['$scope', '$location', '$modal', 'socket', function($scope, $location, $modal, socket) {
...
$scope.openAddClickerModal = function() {
//Get's the next possible ClickerId from the database
socket.then(function(socket) {
socket.emit('clicker:getNextClickerId', {});
});
var modalInstance = $modal.open({
templateUrl: 'partial-views/modal_dialogs/addClickerModal.html',
controller: AddClickerModalCtrl,
size: 'lg',
backdrop: 'static',
keyboard: true,
resolve: {
socket: function(){
return socket;
}
}
});
};
...
}]);
function AddClickerModalCtrl($scope, $modalInstance, socket) {
$scope.nextClickerID = 'No ID';
$scope.input = {};
$scope.errorMsg = { hide: true };
//Receives the next possible ID
socket.then(function (socket) {
socket.on('clicker:getNextClickerId', function (MsgObj) {
$scope.nextClickerID = MsgObj.NextClickerID;
});
});
$scope.addClicker = function () {
if (typeof($scope.input.enoceanUid) !== '' || $scope.input.enoceanUid !== null) {
socket.then(function (socket) {
socket.emit('clicker:addClicker', {
'enoceanUid': $scope.input.enoceanUID,
'clickerName': $scope.input.clickerName
});
});
}
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
socket.then(function(socket){
socket.on('clicker:addClicker', function(MsgObj){
console.log(JSON.stringify(MsgObj));
if(MsgObj.success){
$modalInstance.dismiss('cancel');
} else {
$scope.errorMsg.hide = false;
$scope.errorMsg.msg = MsgObj.error.errorMsg;
}
});
});
}