2

这是我的代码：

<!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>标签内的值，那么您将在控制台窗口中看到，每次更改值时，您更改的值都会输出两次，如下所示：

在此处输入图像描述

为什么会这样？

4

1 回答 1

7

每个摘要周期多次调用手表：

$digest 循环不断迭代，直到模型稳定，这意味着 $evalAsync 队列为空，$watch 列表没有检测到任何变化。

当您键入一个字符时，Angular 会进入摘要循环（因为 Angular 自动添加了一个事件侦听器，因为您使用的是 ng-model）并检测到更改。然后它再次通过循环以确保没有其他更改。这样做是因为如果 $watch 触发，它可能会更改其他一些被监视的属性，然后需要检测这些属性，以便可以执行它的监视函数。

于 2013-08-01T19:12:33.703 回答