Bereich verhält sich anders in Winkel

Ich versuche Bereiche in eckigen zu verstehen.Bereich verhält sich anders in Winkel

<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>

Hier Ergebnis mit var gibt keine Daten wie erwartet. Warum funktioniert die Verwendung von fn richtig und kann 3 mal fn ausgeführt werden. Was ist der wahre Grund dafür?

Vielen Dank im Voraus

Quelle

2016-04-12 Prats

Das Ergebnis mit var, wie Sie es versucht, das Produkt zu berechnen, wenn der Controller erstellt wird und zu diesem Zeitpunkt Nummer ist nicht definiert bezeichnet.

Quelle

2016-04-12 08:43:12

Weil Angular die Vorlagenvariable in jedem Digest-Zyklus auswertet. Im Grunde wird versucht, den Template-Ausdruck bei jeder Bereichsänderung erneut zu füllen, bis die Variablen im Bereich stabil sind.

Quelle

2016-04-12 08:43:20 farincz

können Sie $ beobachten verwenden:

<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

Quelle

2016-04-12 08:54:37 MBN

Wenn Sie dieses Verhalten erzielen möchten, sollten Sie $ Bereich verwenden $ auf dem Eingabemodell beobachten..

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

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

Quelle

2016-04-12 08:56:56

Bereich verhält sich anders in Winkel

Antwort

Verwandte Themen