AngularJS：如何从控制器调用服务函数_Angularjs

AngularJS：如何从控制器调用服务函数

angularjs

AngularJS：如何从控制器调用服务函数,angularjs,Angularjs,AngularJS:web套接字在服务中定义了几个函数。您知道如何在关闭、发送等时调用这些函数吗。。。来自控制器？？当我点击一个按钮时，控制器被调用。错误表示这两行不是函数： $scope.websocket.send和$scope.websocket.onClose <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" sr

AngularJS:web套接字在服务中定义了几个函数。您知道如何在关闭、发送等时调用这些函数吗。。。来自控制器？？当我点击一个按钮时，控制器被调用。错误表示这两行不是函数： $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>

要消除is not a function错误，需要使用this.ws而不是var ws将ws对象绑定到服务对象这样，您就不需要从服务返回任何对象。所以，您的服务代码看起来像-

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

多亏了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);
    }
}]);

我添加了return ws，但从控制器内部得到：$scope.websocket.ws未定义，$scope.websocket.onClose不是函数。也许还有另一种方法可以从控制器调用onClose？？？Intsead of var ws=null；试试这个。ws=null；在您的服务中，您需要在任何地方使用它。请检查我的更新答案。我按照你说的做了，然后我用：$scope.websocket.ws.onClose=>从控制器调用函数onClose，我没有更多的错误消息，但是onClose方法没有执行！我的原始问题是：你能用更新的代码编辑原始帖子吗？