為什么$ watch in angular js導致console.log輸出兩次？

Question

這是我的代碼：

<!doctype html>
<html lang="en-US" ng-app>
    <!--Head-->
    <head>
        <meta charset="UTF-8">
        <title>Lesson 5 - ng-show & ng-hide</title>
        <meta name="viewport" content="width=device-width">
        <style type="text/css">
            * {
                box-sizing: border-box;
            }
            body {
                font: 16px/1.5 Consolas;
                color: #222;
                margin: 5em;
            }
        </style>
    </head>
    <!--Body-->
    <body>

        <div ng-controller="information">
            <!--Input-->
            <label for="name">
                Name:
                <input type="text" name="username" id="username" placeholder="Your name here please" ng-model="name"/>
            </label>
            <br>
            <label>
                Hide?
                <input type="checkbox" ng-model="checked"/>
            </label>
            <!--Div that is hidden-->
            <div ng-hide="checked">
                Hidden Message here
                <br>
                Welcome {{ name || "user" }}!
            </div>

        </div>
        <script type="text/javascript" src="angular_1.0.7.js"></script>
        <script type="text/javascript">
            var information = function ($scope) {
                $scope.$watch(function () {
                    console.log($scope.name);
                });
            };
        </script>
    </body>
</html>

如果你運行這個並更改<input>標簽內的值，那么你會看到在控制台窗口中，每次更改值時，你改變它的值都輸出兩次，如下所示：

在此輸入圖像描述

為什么會這樣？

Answer 1

每個摘要周期多次調用手表：

$ digest循環不斷迭代，直到模型穩定，這意味着$ evalAsync隊列為空，$ watch列表未檢測到任何更改。

當您鍵入一個字符時，Angular會進入摘要循環（因為Angular會自動添加一個事件監聽器，因為您正在使用ng-model）並檢測到更改。 然后，它將再次遍歷循環以確保沒有其他更改。 這樣做是因為如果一個$ watch觸發，它可能會改變一些其他監視屬性，然后需要檢測它，這樣才能執行監視功能。

為什么$ watch in angular js導致console.log輸出兩次？

問題描述

1 個解決方案

解決方案1
7 已采納 2013-08-01 19:12:33

為什么$ watch in angular js導致console.log輸出兩次？

問題描述

1 個解決方案

解決方案1 7 已采納 2013-08-01 19:12:33

解決方案1
7 已采納 2013-08-01 19:12:33