Question

我正在尝试使用角度js和Web套接字更新带有一些周期性数据的UI，但每当我的事件处理程序被触发时，控制器变量都是未定义的。这是代码

(function() {
    'use strict';

    angular
        .module('mainApp')
        .controller('overviewCtrl', [
            '$rootScope',
            '$scope',
            'commonService',
            'summaryService',
            OverviewCtrl
        ]);

    function OverviewCtrl($rootScope, $scope, commonService, summaryService) {

        this.commonService = commonService;
        this.scope = $scope;
        this.rootScope = $rootScope;
        this.scope.tasks=[];
        this.summaryService = summaryService;
        this.rootScope.connection=new WebSocket('ws://localhost:8080/echo');
        this.rootScope.connection.onmessage =  this.progress ;

        return (this);

    }

    OverviewCtrl.prototype = {
        cpuUsage: function(){

            return this.summaryService._cpuUsage();
        },
        get serverSummary(){

            return this.summaryService._serverSummary();
        },
        taskList: function(){

            this.scope.tasks=this.summaryService._taskList();
            this.scope.tasks[0].status=0;
            this.scope.tasks[3].status=60;
            return this.scope.tasks;
        },

        progress:function(e){


           var server_message = e.data;
           console.log(server_message);
           this.scope.tasks[0].status=e.data;

     }



    };

})();

每当从websocket调用progress事件处理程序作为onmessage的一部分时，范围和任务似乎是未定义的。有什么问题？。

Answer 1

问题是当websocket调用你的回调函数时，它不再绑定到this了。它只是一个与您的控制器分离的功能。

我个人认为this处理JavaScript是一场噩梦，也是一个巨大的错误来源，这就是为什么我更喜欢传统的定义控制器的方式：根本不使用它，并将函数绑定到$ scope如果必须从视图中调用它们。如果你这样做，你永远不会有这样的问题。

如果您坚持要使用this，那么您需要阅读https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind并使用它：

 this.rootScope.connection.onmessage = this.progress.bind(this);

Angular JS范围变量在事件期间不可用

1 个答案: