将promise传递给ui.angular模态对话框的resolve-Object

时间:2014-10-22 07:25:14

标签: angularjs angular-ui angular-ui-bootstrap

我有一个大问题。 我在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;
            }
        });
    });
}

0 个答案:

没有答案