2

私は本を​​読んでいて、ng-classでこの例The Complete Book on AngularJS, Ari Lernerを見つけました。関数内に console.log を 1 つ追加しました。一度だけログに記録されていることがわかります。generateNumber()

xその後、使用されている場所をgenerateNumber()関数呼び出しに置き換えました。私の変更後、私のコードは次のようになります。

HTML

<!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div ng-controller="LotteryController">
  <div ng-class="{red: generateNumber() > 5}">
    You won!
  </div> 
  <button ng-click="generateNumber()">Draw Number</button>
  <p>Number is: {{ x }}</p>
</div>

</body>
</html>

JS

angular.module('myApp', [])
.controller('LotteryController', function($scope) {
  $scope.generateNumber = function() {
    var num = Math.floor((Math.random()*10)+1);
    console.log("Number: "+num);
    $scope.x = num;
    return num;
  };
});

そのため、何度もログに記録された理由を理解できずconsole.log()、ボタンをクリックしても、一度しかログに記録されていないはずですが、複数回ログに記録されました。なぜそのメソッドが何度も呼び出されるのか理解できません。また、この例外が発生することもあります（上の2行だけを貼り付けました）

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations:

この $digest は何のためですか? そして限界に達した理由。ウォッチャーとは？ロギングが何度も行われる理由を教えてください。君たちありがとう、

編集

返信ありがとうございますng-class="{red: generateNumber() > 5}"。誰かが私にこれを説明できますか。そこでは使いたくない$scope.xので、今は無視してください。

君たちありがとう、

4

4 に答える 4

1

$scope.generateNumber メソッドを ng-class の条件として使用するため、console.log が $scope.$digest ごとに呼び出され、内部で generateNumber() が $scope.x 変数を変更し、新しい $digest サイクルが実行されます。

各 $digest サイクルで生成番号が呼び出され、クラスを適用するかどうかを決定します。

$scope.x を ng-class の条件として使用する

angular.module('myApp', [])
.controller('LotteryController', function($scope) {
  $scope.generateNumber = function() {
    var num = Math.floor((Math.random()*10)+1);
    console.log("Number: "+num);
    $scope.x = num;
    return num;
  };
});
<!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div ng-controller="LotteryController">
  <div ng-class="{red: x > 5}">
    You won!
  </div> 
  <button ng-click="generateNumber()">Draw Number</button>
  <p>Number is: {{ x }}</p>
</div>

</body>
</html>

于 2015-08-24T13:58:40.423 に答える
0

ng-class と ng-click で generateNumber() を 2 回呼び出しているため、複数回ログが記録されます。ng-class の変更を確認してください。

angular.module('myApp', [])
.controller('LotteryController', function($scope) {
  $scope.generateNumber = function() {
    var num = Math.floor((Math.random()*10)+1);
    console.log("Number: "+num);
    $scope.x = num;
    return num;
  };
});
<!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div ng-controller="LotteryController">
  <div ng-class="{red: x > 5}">
    You won!
  </div> 
  <button ng-click="generateNumber()">Draw Number</button>
  <p>Number is: {{ x }}</p>
</div>

</body>
</html>

于 2015-08-24T13:52:48.960 に答える