Question

AngularJS：Web套接字定义了服务中的几个函数。你知道如何从控制器调用这些函数（onCLose，send，...）吗？单击按钮时会调用控制器。错误说＆＃34;不是函数＆＃34;关于这两行： $ scope.websocket.send和$ scope.websocket.onClose

<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-websocket.js"></script>
<script type="text/javascript">

var app = angular.module('myApp', ['ngWebSocket']);

app.service('WebSocketWrapper', ['$log', '$websocket', '$rootScope', function($log, $websocket, $rootScope){
    var ws = null;
    this.state = 'initializing';
    this.message = 'websocket initializing';
    var self = this;
    this.init = function(){
        if(!ws){
            ws = $websocket('ws://127.0.0.1:8080/WebSocketHome/echo', null, {reconnectIfNorNormalClose: true});

            ws.onClose(function(){
                console.info('close');
                $rootScope.$apply(function(){
                    self.state = 'disconnected';
                    self.message = 'Websocket disconnected';
                });
            });

            ws.onOpen(function(){
                console.info('connected');
                $rootScope.$apply(function(){
                    self.state = 'connected';
                    self.message = 'websocket connected';
                });
            });

            ws.onMessage(function(message){
                console.log("RECEIVED : " + message);
            });
        }
    };
}]);

app.controller('WebSocketStateCtrl', ['$scope', 'WebSocketWrapper', function($scope, WebSocketWrapper){
    $scope.websocket = WebSocketWrapper;
    $scope.websocket.init();
    $scope.sendMessage = function(){
        $scope.websocket.send($scope.name);
        $scope.websocket.onClose();
    }

}]);

</script>

</head>
<body>

    <div ng-app="myApp" ng-controller="WebSocketStateCtrl">
        <form action="">
            <input type="text" ng-model="name">
            <button ng-click="sendMessage()">SEND</button>
        </form>
    </div>

</body>
</html>

Answer 1

摆脱＆＃34;不是一个功能＆＃34;错误，您需要使用this.ws而不是var ws将return对象绑定到服务对象有了这个，你不需要app.service('WebSocketWrapper', ['$log', '$websocket', '$rootScope', function($log, $websocket, $rootScope){ this.ws = null; // Attach ws to service object this.state = 'initializing'; this.message = 'websocket initializing'; var self = this; this.init = function(){ if(!this.ws){ this.ws = $websocket('ws://127.0.0.1:8080/WebSocketHome/echo', null, {reconnectIfNorNormalClose: true}); this.ws.onClose(function(){ console.info('close'); $rootScope.$apply(function(){ self.state = 'disconnected'; self.message = 'Websocket disconnected'; }); }); this.ws.onOpen(function(){ console.info('connected'); $rootScope.$apply(function(){ self.state = 'connected'; self.message = 'websocket connected'; }); }); this.ws.onMessage(function(message){ console.log("RECEIVED : " + message); }); } }; }]);来自服务的任何对象因此，您的服务代码看起来像 -

{{1}}

Answer 2

我终于找到了解决方案，感谢Vandesh：

app.service('WebSocketWrapper', ['$log', '$websocket', '$rootScope', function($log, $websocket, $rootScope){
    this.ws = null; // Attach ws to service object
    this.state = 'initializing';
    this.message = 'websocket initializing';
    var self = this;
    this.init = function(){
        if(!this.ws){
            this.ws = $websocket('ws://127.0.0.1:8080/WebSocketHome/echo', null, {reconnectIfNorNormalClose: true});

            this.ws.onClose(function(){
                console.info('close');
                $rootScope.$apply(function(){
                    self.state = 'disconnected';
                    self.message = 'Websocket disconnected';
                });
            });

            this.ws.onOpen(function(){
                console.info('connected');
                $rootScope.$apply(function(){
                    self.state = 'connected';
                    self.message = 'websocket connected';
                });
            });

            this.ws.onMessage(function(message){
                console.log("RECEIVED : " + message);
            });
        }
    };
return this.ws;
}]);

app.controller('WebSocketStateCtrl', ['$scope', 'WebSocketWrapper', function($scope, WebSocketWrapper){
    $scope.websocket = WebSocketWrapper;
    $scope.websocket.init();
    $scope.sendMsg = function sendMsg() {
        $scope.websocket.ws.send($scope.name);
    }
}]);

AngularJS：如何从控制器调用服务功能

2 个答案: