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

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() 的方法将更改通知 angular，最好使用 $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: 在自己的控制器中定义的指令监视模型

Angular: Directive watch model defined in own controller

angularjs-directive

angularjs-scope