0

angular 1.xコントローラー内でd3.jsライブラリーを使用しています。私の d3.js ライブラリは、div でクリック イベントを作成し、div がクリックされると、角度コントローラーのスコープで何かを更新します。

問題は、スコープ ( $scope.test = "a test") を変更すると、変更がテンプレートにレポートされないことです。

ただし、その d3.js クリック イベント内で $scope.$apply を実行すると (この関連トピックで提案されているように: Angular + D3 - Get scope values to show in template from click event )、dom が更新され、すべてが正常に動作します。

スコープの使用は推奨されていないため、テンプレートに変更を反映させる別の解決策はありますか?

これが私のコードです：

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.1/d3.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body>
  <div  ng-app="app" >
    <div id="main" ng-controller="main">    
      test is {{test}}
      <div id="graph">
        hello  
      </div>
    </div>
  </div> 
</body>
<script type="text/javascript">
  var app = angular.module('app',[]);
  app.controller('main', function($scope){

    $scope.force_refresh = function(){}

    d3.selectAll("#graph").on("click", function() {
      $scope.test = "a test";
      //////////I would like to avoid this/////////////
      $scope.$apply();             ////////////////////
      //////////I would like to avoid this/////////////
    });
  });

</script>
</html>
4

0 に答える 0