Распространение событий от d3.js до угловых без обращения к scope.apply

Я использую библиотеку d3.js внутри углового контроллера 1.x. Моя библиотека d3.js создает событие щелчка на элементе div, и при нажатии на элемент div он обновляет что-то в области видимости углового контроллера.

Проблема в том, когда я меняю сферу ($scope.test = "a test"), изменение не сообщается в шаблоне.

Однако, если внутри этого события клика d3.js я использую $scope.$ Apply (как предложено в этой связанной теме: Angular + D3 - Получить значения области, которые будут отображаться в шаблоне из события click), 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>
Источник

0 ответов

Другие вопросы по тегам