understanding how values of variable changes in angular?

Question

I was just going through the angular-openlayers-directive and found an example HERE.

Now i have a angular question , you can see the code as below:

  var app = angular.module("demoapp", ["openlayers-directive"]);
        app.controller("DemoController", [ "$scope", "olHelpers", function($scope, olHelpers) {
            angular.extend($scope, {
                offset: 0,
                cairo: {
                    lat: 30.0047,
                    lon: 31.2586,
                    zoom: 10,
                    bounds: []
                }
            });

            $scope.$watch("offset", function(offset) {
                $scope.cairo.bounds[0] += parseFloat(offset, 10);
                $scope.cairo.bounds[1] += parseFloat(offset, 10);
                $scope.cairo.bounds[2] -= parseFloat(offset, 10);
                $scope.cairo.bounds[3] -= parseFloat(offset, 10);
            });
        }]);

I am highly interested in knowing what happens in the below lines of code:

see inside the object literal ciaro: bounds: [] , and then check out the below $watch:

$scope.$watch("offset", function(offset) {
                    $scope.cairo.bounds[0] += parseFloat(offset, 10);
                    $scope.cairo.bounds[1] += parseFloat(offset, 10);
                    $scope.cairo.bounds[2] -= parseFloat(offset, 10);
                    $scope.cairo.bounds[3] -= parseFloat(offset, 10);
});

now i inserted the following test code to see what exactly is the values of offset and if it changes:

setTimeout(function(){
        console.log($scope.offset);
}, 3000);

i always set 0 as the value , so why the $watch on focus than ? it never changes , also how does the values of bound[0] , bound[1] , bound[2] , and bound[3] change ? i mean thier values are not 0 ? How come ? can anybody explain that ?

EDIT ::

Just did a little bit more testing and found the following:

Even if i remove the following code:

$scope.$watch("offset", function(offset) {                    
          $scope.cairo.bounds[0] += parseFloat(offset, 10);
          $scope.cairo.bounds[1] += parseFloat(offset, 10);
          $scope.cairo.bounds[2] -= parseFloat(offset, 10);
          $scope.cairo.bounds[3] -= parseFloat(offset, 10);                     
});

and i add the following test code:

setTimeout(function(){
                    console.log($scope.cairo.bounds[0] + ' ' + $scope.cairo.bounds[1] + ' ' + $scope.cairo.bounds[2] + ' ' + $scope.cairo.bounds[3]);
                }, 3000);

I get the following in the console:

30.76009536132813 29.766565657014212 31.757104638671876 30.242264176913594

Where on earth are thes values coming in bounds[] from ?

Nothing in the posted code modifies the offset. But what you put in the scope is intended to be read and modified by the view. So you probably have a piece of code in the view that modifies it. — JB Nizet
– JB Nizet, Commented Oct 31, 2015 at 21:35
Nothing in the posted code , well i have posted a like too tombatossals.github.io/angular-openlayers-directive/examples/… .. i am making a example in vanilla js to check if just initializing the map with a lat and lon actually also adds a extent to the map , openlayers.org/en/v3.0.0/apidoc/ol.geom.Circle.html#getExtent , will keep this thread updated for more . — Tenali Raman
– Tenali Raman, Commented Oct 31, 2015 at 21:39

Tenali Raman · Accepted Answer · 2015-10-31 22:00:22Z

1

The answer lied in the source of angular-openlayers-directive , check out the below source code:

if (isArray(scope.center.bounds)) {
    var extent = view.calculateExtent(map.getSize());
    var centerProjection = scope.center.projection;
    var viewProjection = defaults.view.projection;
    scope.center.bounds = ol.proj.transformExtent(extent, viewProjection, centerProjection);
}

So we define bound:[] and the above code works its magic , the below line:

var extent = view.calculateExtent(map.getSize());

returns an array and yes if a map is initialized with lat and lon, the extend , is set automatically.

answered Oct 31, 2015 at 22:00

Tenali Raman

4806 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

understanding how values of variable changes in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related