Question

当数据被推送到websocket时，我尝试更新我的图表。我想通过在angular中定义我自己的指令来做到这一点，但是数据的绑定不起作用。守则：

angular.directive("myChart", ['service', function (service) {
    function ChartController ($scope) {
        var ws = new WebSocket("url/to/websocket/");
        var data = service.initData(); // initialize data table
        ws.onmessage = function (event) { // listen and update data
            data = service.updateData(event.data);
            $scope.recentData = data;
        }
        $scope.recentData = data;
    }

    function link(scope, element, attr) {
        function drawChart (data) {}

        scope.$watch('data', function (newD, old) {
            drawChart(newD);
        }, true);
    }
    return {link: link, controller: ['$scope', ChartController], restrict: 'EA'}  
}

这是一个简单的例子，我想做的事情。服务和数据更改工作正常，我可以记录当前值。但是drawChart()仅在启动时调用，而不是在每个突变上调用。

控制器必须是指令的一部分，而不是

Answer 1

您需要使用在更改发生后调用apply（）的方法通知角度更改，最好使用$ timeout。

angular.directive("myChart", ['service', '$timeout', function (service, $timeout) {
function ChartController ($scope) {
    var ws = new WebSocket("url/to/websocket/");
    var data = service.initData(); // initialize data table
    ws.onmessage = function (event) { // listen and update data
        data = service.updateData(event.data);
        $scope.recentData = data;
    }
    $scope.recentData = data;
}

function link(scope, element, attr) {
    function drawChart (data) {}

    scope.$watch('data', function (newD, old) {
        $timeout(function(){
          drawChart(newD);
         });
    }, true);
}
return {link: link, controller: ['$scope', ChartController], restrict:     'EA'}  
}

Angular：在自己的控制器中定义的指令监视模型

1 个答案: