Angularjs-当dom操作被分配给按钮点击时,它是有效的,在指令中它是不完整的

Angularjs - when dom manipulation is assigned to button click it works, in directive it is incomplete

本文关键字:有效 指令 操作 dom 分配 按钮 Angularjs-      更新时间:2023-09-26

我现在已经尝试了几种方法。

方法1

我有一个从服务器加载数据的方法。这在我的控制器中:

$scope.loadResults = function() {
  var url = "MY URL";
  $http.get(url).success(
    function(data, status, headers, config) {
      var tempResults=[];
      for (var i = 0; i < data.length; i++) {
      tempResults.push({date: data[i].date, p: data[i].p, result: data[i].result});
      }
      $scope.results = tempResults;
      $scope.drawChart(); //THIS IS THE METHOD I WANT TO RUN (this is approach number #1)
    }
    );
};

这是我的绘图方法(也在控制器中(:

$scope.drawChart = function(){
    var r = Raphael("pie");
    var tempTypeDistribution = [];
    for (var j = 0; j < 7; j++) {
      tempTypeDistribution.push($scope.typeCount(j));
    }
    $scope.typeDistribution=tempTypeDistribution;
    if($scope.typePie){
        $scope.typePie.clear();
    }
    $scope.typePie = r.piechart(120, 120, 90, $scope.typeDistribution,
    {
      legend: ["%% - A", "%% - B", "%% - C", "%% - D", "%% - E", "%% - F", "%% - G"],
      legendpos: "east"
    }
    );
  };

这不起作用。图表已绘制,但有错误。添加$scope.$apply();会出现以下错误:Error: $digest already in progress和添加safeApply没有任何作用。

方法2

在我的directive.js中,我创建了这个results:的观察者

App.directive('chart', function(){
  return{
    restrict: 'E',
    link: function(scope, elem, attrs){
      var data = scope[attrs.ngModel];
      scope.$watch('results', function(v){
        var r = Raphael("pie");
        var tempTypeDistribution = [];
        for (var j = 0; j < 7; j++) {
          tempTypeDistribution.push(scope.typeCount(j));
        }
        if(scope.typePie){
            scope.typePie.clear();
        }
        scope.typePie = r.piechart(120, 120, 90, tempTypeDistribution,
        {
          {
          legend: ["%% - A", "%% - B", "%% - C", "%% - D", "%% - E", "%% - F", "%% - G"],
          legendpos: "east"
          }
        });
        scope.$apply();
      });
}
};
});

同样,这是行不通的。图表已绘制,但有错误。添加scope.$apply();会出现以下错误:Error: $digest already in progress和添加safeApply没有任何作用。

方法3

我在视图中创建了一个按钮:

 <div id="pie">
         <chart ng-model='data'> </chart>
 </div>
<button class="btn btn-success" type="submit" ng-click="drawChart()" tabindex="3">draw</button>

当我点击它时,图表会被完美地绘制出来,就像我想要的一样。但我希望图表在"结果"更改时自动重新绘制。所以我应该使用一个指令,但显然它不起作用。有人能帮忙吗?

问题似乎是由graphael在隐藏输出div时的行为引起的:

http://www.shanison.com/2010/07/18/raphael-pie-chart-legend-stacked-line-problem/