View not updating when value changes

Question

I am working with angularjs 1.6, leaflet and mapbox. I am trying to recreate a box whose value changes based on which polygon you are hovering over in an angularjs way. The behaviour I want to recreate is in this example http://leafletjs.com/examples/choropleth/

You can see the value in the box in the top right of the map changes based on which polygon you are hovering over. When I try to recreate it in an angular way, the view does not update but I can see the value in my component updating.

html:

 <div class="data">{{vm.polygonValue}}</div>

Controller (same as the highlight feature in the example):

 function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle({
     weight: 3,
     color: '#666',
     fillOpacity: 0.5
  });

  if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
    layer.bringToFront();
  }

   addValue(layer.feature.properties);
  }


function addValue(props){
   vm.polygonValue = props.value;
 }

All runs in the controller and I can see the vm.polygonValue change when you hover over a polygon but the view doesn't change. Can someone help? Wondering is it because the value changes too frequently or something and angular cant handle it?

peter · Accepted Answer · 2018-02-27 12:02:54Z

2

Probably your function is triggered outside of the angular digest cycle, to notify angular about changes you need to execute it within $scope.$apply function.

Something like $scope.$apply(() => addValue(layer.feature.properties)) should work. You can find out more about $apply in the docs: https://code.angularjs.org/1.6.9/docs/api/ng/type/$rootScope.Scope#$apply

edited Feb 27, 2018 at 12:02

answered Feb 27, 2018 at 11:59

peter

15.3k12 gold badges64 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3214545 Over a year ago

Angularjs 1.6 doesn't have $scope.$apply :(

peter Over a year ago

are you sure? the documentation is for 1.6.9

peter Over a year ago

@user3214545 try $rootScope.Scope.$apply maybe

user3214545 Over a year ago

neither work unfortunately, throws errors everytime it hits $root.$digest(); as $root is not defined and you cant use $rootscope. And anytime is doesnt, it still doesnt update the view. I know that angular 1.6 is supposed to moving toward Angular2 so they dont want you using $rootScopre

Petr Averyanov Over a year ago

Of course, there are $scope and $rootScope and $scope.$apply in angular 1.6.X and this is right methods to run. When you read 'do not use $scope' -- this is actually for angular beginners trying to put every html binding directly to $scope.

Collectives™ on Stack Overflow

View not updating when value changes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related