Question

现在我正在以角度js实现折线图。我已经为此编写了一个指令，所以它工作正常，但是当我在这个指令中使用$ watch时，每次图表都会不断更新。我想在加载页面后使用$ watch进行一些动态更改。

angular.module('app.abc').directive('linechart', function () {
    return {
        restrict: 'A',
        template:'',
        link: function (scope, element, attributes) {
            scope.$watch(function(){
                var lineOptions = {                   
               scaleShowGridLines : true,            
               scaleGridLineColor : "rgba(0,0,0,.05)",               
               scaleGridLineWidth : 1,              
              bezierCurve : true,                   
            };    
            var lineData = { labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [                   
                    {
                        label: "My Second dataset",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: [28, 48, 40, 19, 86, 27, 90]
                    }
                ]
            };              

            var ctx = element[0].getContext("2d");
            var myNewChart = new Chart(ctx).Line(lineData, lineOptions); 
            })           
        }
    }
});

 <canvas style="display: block;"  linechart height="120" ></canvas>

反映更新的折线图是连续的。但我不想持续反思。我试图将我的ctx对象放在$ watch之外，但是图表没有显示任何内容。实际上我是角度js的新手，也是指令的新手。请告诉我如何使用$ watch处理此指令。我看过一个演示（基于javascript）示例https://codepen.io/SitePoint/pen/mJRrKw

我不想在角度js中用$ watch自动反映图表？

0 个答案: