CODEWITHSUNDEEP
javascriptangularjs
Prats
Prats

Reputation: 1765

scope behaving differently in angular

I am trying to understand scopes in angular.

<html>

   <head>
      <title>Angular JS Services</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app = "mainApp" ng-controller = "TestController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <p>Result using fn: {{resultData()}}</p>
         <p>Result using var: {{result}}</p>
      </div>

      <script>
         var mainApp = angular.module("mainApp", []);

         mainApp.controller('TestController', function($scope) {

             $scope.result = $scope.number * $scope.number;

             $scope.resultData = function(){ 
                 console.log("test");
                 return $scope.number *$scope.number;
             }

         });
      </script>

   </body>
</html>

Here Result using var is not giving data as expected. Why Result using fn is working correctly and can see 3 times fn get executed. Whats the real reason behind this.

Thanks in advance

Upvotes: 0

Views: 43

Answers (4)

Eduard Dragoi
Eduard Dragoi

Reputation: 1

If you want to achieve this behaviour, you should use $scope.$watch on the input model.

$scope.$watch('number',function(newValue, oldValue){
    if(typeof newValue!=='undefined' && newValue!==oldValue){
        $scope.result = newValue * newValue;
    }
})

Fiddle: https://jsfiddle.net/Lt7aP/2537/

Upvotes: 0

MBN
MBN

Reputation: 1006

You can use $watch:

<html>

   <head>
      <title>Angular JS Services</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app = "mainApp" ng-controller = "TestController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <p>Result using fn: {{resultData()}}</p>
         <p>Result using var: {{result}}</p>
      </div>

      <script>
         var mainApp = angular.module("mainApp", []);

         mainApp.controller('TestController', function($scope) {

             $scope.$watch('number', function(val){
                 $scope.result = val * val;
             });

             $scope.resultData = function(){ 
                 console.log("test");
                 return $scope.number *$scope.number;
             }

         });
      </script>

   </body>
</html>

JSFiddle

Upvotes: 1

farincz
farincz

Reputation: 5173

Because Angular evaluates template variable in each digest cycle. Basically it tries to fill template expression on each scope change again until variables on scope are stable.

Upvotes: 3

Jordi Ruiz
Jordi Ruiz

Reputation: 487

The result using var as you called it is trying to calculate the product when the controller is created and at this time number is undefined.

Upvotes: 0

Related Questions