How to trigger an angular change from a non-angular context e.g. from a D3 event?

Question

I'm using AngularJS 1.6.x and build a table using ng-repeat as shown below. However, now I need to show a new column depending on some dynamic boolean condition i.e. isDynamicVisible:

<table>
    <thead>
    <tr>
        <th id="name">Name</th>
        <th id="mean">Mean</th>
        <th ng-if="isDynamicVisible">Dynamic</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="data in displayedPathStatistics" ng-class="{selected: (histogramData.selected === data.name)}"
        ng-click="selectPathOutputRow(data.name)">
        <td>{{data.displayName}}</td>
        <td>{{data.Mean}}</td>
        <td ng-if="isDynamicVisible">{{dynamicVal}}</td>
    </tr>
    </tbody>
</table>

On the controller side:

constructor(private $window: IWindowService, private $rootScope: IRootScopeService, private $scope:IReportCtrlScope, private $location:ng.ILocationService, private remoteServices: RemoteServices) {
    $scope.isDynamicVisible = false;

    // ...
    objects.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .classed("dot", true)
    .attr("r", function (d) {
            return 6 * Math.sqrt(2.0 / Math.PI);
    })
    .attr("transform", transform)
    .style("fill", colorVal)
    .on("mouseover", function(d) {
        $scope.isDynamicVisible = true;
        return tip.show(d);
    })
    .on("mouseout", function(d) {
        $scope.isDynamicVisible = false;
        return tip.hide(d);
    });

The problem is that the condition is evaluated only once at the beginning and upon constructing the table, later no matter that the isDynamicVisible scope variable changes it will stay how it initially was. I have also tried using ng-show without success.

UPDATE: the isDynamicVisible is changed from the Controller specifically when the user hovers over a data point of a D3 JS scatter plot.

Is kind of irrelevant but Ok. I have already tested that the code there executes correctly etc. — SkyWalker, May 30 '17 at 12:23
Avoid `jquery`, and use `ng-mouseover` and `ng-mouseout` directives. — anoop, May 30 '17 at 12:27

Deblaton Jean-Philippe · Answer 1 · 2017-05-30T12:32:03.633

2

You issue is caused by the way change detection works in angularjs. When you bind your code to something else than an angular event, angular is not aware that you updated some properties, and does not trigger his $digest cycle, which updates views

you need to use the directive ngMouseOver inside your template :

<div ng-mouseover="isDynamicVisible = true" ng-mouseout="isDynamicVisible = false">
   some html element
</div>

If, this div is out of your controller (which should not happen) you should use

.on("mouseout", function(d) {
    $timeout(function () {
        $scope.isDynamicVisible = false;
    }
    return tip.hide(d);
});

edited May 30 '17 at 12:32

answered May 30 '17 at 12:24

Deblaton Jean-Philippe

11,188
3
49
66

then, you should use $timeout() instead of $scope.$apply() to avoid concurrent $apply inside your application. – Deblaton Jean-Philippe May 30 '17 at 12:47
by the way, I think you should have a look at this : https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – Deblaton Jean-Philippe May 30 '17 at 12:51

score 0 · Accepted Answer · answered May 30 '17 at 12:23

0

If your listeners are fired from a non-angular context (i.e. from D3), you have to wrap your $scope attributes modifications under a $scope.$apply call:

.on("mouseover", function(d) {
    $scope.$apply(function () {
        $scope.isDynamicVisible = true;
    }
    return tip.show(d);
})
.on("mouseout", function(d) {
    $scope.$apply(function () {
        $scope.isDynamicVisible = false;
    }
    return tip.hide(d);
})

Hence, the Angular digest cycle will be started and your view will update itself.

answered May 30 '17 at 12:23

SinDeus

516
1
6
21

That's it, you nailed it Sir :) – SkyWalker May 30 '17 at 12:25
1

you should pay attention to this : https://stackoverflow.com/questions/18626039/apply-already-in-progress-error – Deblaton Jean-Philippe May 30 '17 at 12:29
@DeblatonJean-Philippe: that's correct! Thanks for pointing it out. – SinDeus May 30 '17 at 13:42

score 0 · Answer 3 · answered May 30 '17 at 12:26

You can try to use $timeout. It'll guarantee, that you'll have at least one another digest loop, so you'll not be forsed to use $apply. From the user point of view, there will be no difference.

.on("mouseover", function(d) {
    $timeout(function() {
      $scope.isDynamicVisible = true;
      return tip.show(d);
    })
})

How to trigger an angular change from a non-angular context e.g. from a D3 event?

3 Answers3