AngularJS 摘要循环究竟是如何工作的?

2024-02-07

我是 AngularJS 的新手,我正在通过教程学习它。我对与此相关的概念有些疑问摘要循环由 Angular 提供。

我的应用程序由这两个文件组成:

1) 索引.html:

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
        <title>Learn and Understand AngularJS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>

        <!-- load angular via CDN -->
        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-controller="mainController">

                <div>
                    <label>What is your twitter handle?</label>
                    <input type="text" ng-model="handle" />
                </div>

                <hr />

                <h1>twitter.com/{{ lowercasehandle() }}</h1>

            </div>

        </div>

    </body>
</html>

2) app.js:

var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$filter', '$timeout', function($scope, $filter, $timeout) {

    // Variable that is bound to the input into the view handled by the 'mainController' controller:
    $scope.handle = '';

    // This variable is a function putted into the $scope and contain the lowecase content of the handle variable:
    $scope.lowercasehandle = function() {
        return $filter('lowercase')($scope.handle);
    };

    // I explicitly declare a whatche on the handle property: when the value of this propertu change the function() is performed:
    $scope.$watch('handle', function(newValue, oldValue) {

        console.info('Changed!');
        console.log('Old:' + oldValue);
        console.log('New:' + newValue);

    });

    $timeout(function() {

        $scope.handle = 'newtwitterhandle';
        console.log('Scope changed!');

    }, 3000);

}]);

据我了解,handle变量通过以下方式声明到 Angular 范围中:

$scope.handle = '';

并且它会自动绑定到特定的视图对象,如 DOM 的本节中所声明的那样index.html:

<div>
    <label>What is your twitter handle?</label>
    <input type="text" ng-model="handle" />
</div>

所以任何发生的改变input对象意味着改变handle财产在$scope反之亦然。

我的理解是,使用 Angular,我不必手动添加经典的普通 JavaScript事件监听器(由添加事件监听器()在我想要观察的对象上)但是 Angular 使用以下方法为我实现了这个功能摘要循环.

然后 Angular(但我不太确定)维护了一个观察者名单 in the 角度上下文。在此列表中,页面中包含的范围内的每个元素(输入、选择等)都有一个观察者对象。

因此观察者包含有关旧值新价值相关元素的值,如果新值与旧值不同,Angular 会自动更新 DOM 中的相关字段。

据我了解,摘要循环不断迭代观察者名单检查特定观察者的旧值是否与新值不同(如果观察对象的值发生更改)。

那么它到底意味着什么? Angular 不断运行一个循环(类似于while)不断检查某些字段的值是否发生变化?如果发生的话会自动执行特定操作吗?


您的所有断言都是正确的,但是摘要循环活动不是这样一个始终运行以查找更改的计时器函数,但是当您添加隐式观察程序(使用 ng-model 或 ng-bind)并且在角度上下文(输入更改,点击事件等。)摘要循环启动并将更改应用于所有活动观察者。是一个循环,因为它在前一次迭代标记一些更改时运行;当没有任何更改或交互超过 10 次时(这意味着存在一些设计问题),它就会停止。

这是因为太多的观察者可能会导致性能问题。

理解这一点的一个很好的例子是使用链接函数创建一个指令来更改某些模型属性。如果您没有在 $apply 函数中包含该更改,或者您没有调用 $digest,则模型更改将不会影响模型观察者。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 摘要循环究竟是如何工作的? 的相关文章

随机推荐

  • 网页抓取,获取空列表

    我很难用我的网络抓取代码找出正确的路径 我正在尝试从中获取不同的信息http financials morningstar com company profile c action t AAPL http financials mornin
  • “ipython”选项卡自动完成功能不适用于导入的模块

    IPython 上的制表符补全似乎不起作用 例如 import numpy numpy
  • 如何使用 FTPS/TLS 1.2 版模拟 FTP 连接?

    我有一个 Python 代码 使用 HTTPS 和 TLS 版本 1 2 从 FTP 读取一些文件 这是函数 凭证是从 AWS 秘密管理器读取的 def ftp connection host username password try f
  • Identity Server 3 - Ajax 调用上的 401 而不是 302

    我有一个 Web api mvc 混合应用程序 我已将其配置为使用 cookie 身份验证 这对于应用程序的 mvc 部分效果很好 Web api 确实强制执行授权 但不是返回401 Unauthorised它返回一个302 Found并重
  • 当我使用 doReturn(..).when(....) 时,PowerMockito 正在调用该方法

    我是 PowerMockito 的新手 它显示的行为我不明白 以下代码解释了我的问题 public class ClassOfInterest private Object methodIWantToMock String x String
  • QT和MFC哪个更好学[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 将对象添加到 ArrayList 指定索引处

    我认为这是一个相当简单的问题 但我不知道如何正确地做到这一点 我有一个空的数组列表 ArrayList list new ArrayList 我有一些对象 我想在其中添加对象 并且每个对象必须位于某个位置 然而 有必要将它们按每种可能的顺序
  • Inner Join 是否存在性能问题?

    目前我在我的 sp 中使用了很多内部联接 大约 7 个 它对 sp 性能有任何影响吗 左外连接是否比内连接提供更好的性能 另一件事是 如果我连接两个表 a 和 b 其中列 id 和 id1 都不可为空 我想在这里我可以进行内部联接 因为这些
  • 在 HTML 选择标签中找到默认选择的选项?

    我在网上找到了清除表单的代码 但它没有用于选择框的内容 使用 jquery 当我重置表单时 我尝试添加代码来选择选择框中的默认选项 我认为找到默认值的唯一方法是查找 SELECTED 选项所在的位置 然后我发现 当用户选择其他内容时 jqu
  • 如何确保即使在异常终止时也会调用 UnhookWindowsHookEx?

    不幸的是 MSDN 对此还不够清楚 我正在编写一个使用全局钩子的程序 我担心如果程序异常终止 崩溃 被用户杀死等 会发生什么 当进程终止时 Windows 是否会自动取消进程安装的全局挂钩 如果没有 是否可以在另一个进程中调用UnhookW
  • 升级到 bootstrap-sass 3.2.0 时出现问题

    将 bootstrap sass gem 升级到时是否还需要引用 配置其他内容 gt 3 2 0 使用 RubyMine 6 3 作为编辑器 并在 Gemfile 中添加以下内容 ruby 2 1 2 gem rails 4 1 1 gem
  • Jinja2 按空格分割字符串

    我正在使用 Jinja2 模板引擎 pelican 我有一个字符串说 a 1 我正在寻找一种方法将该字符串分成两部分 使用空格作为分隔符 所以我正在寻找的最终结果是一个变量 它以数组的形式保存两个值 例如str 0 计算结果为 a str
  • 为分层模型创建高效的数据库查询(django)

    考虑这个 django 模型 class Source models Model Some other fields type models ForeignKey Type class Type models Model Some othe
  • WSO2 CEP - 内存不足

    我们在 CEP 上看到内存不足错误 线程转储显示大约有 32000 个线程在监视器上休眠 此外 即使 CEP JVM 选项指定在内存不足时生成 HeapDump 我们也没有看到生成任何堆转储 请指教 CEP JVM Xms256m Xmx1
  • JavaScript 获取 HTML 表的行数

    如何使用 JavaScript 获取 HTML 的行数table有id和名字吗 Given a table thead tr th Header th tr thead tbody tr td Row 1 td tr tr td Row 2
  • id() 函数的用途是什么?

    I read Python 2 文档 http docs python org 2 library functions html id并注意到id 功能 返回对象的 身份 这是一个整数 或长整数 保证该对象在其生命周期内是唯一且恒定的 具有
  • asp.net core 从构建中排除文件

    我正在尝试将 Protractor 添加到我的 asp net core 应用程序中 我通过 npm 添加它 它安装了 selenium webdriver 其中包含一个文件Page aspx cs 这导致构建错误 但我的项目甚至不需要编译
  • 我可以配置并行扩展使用的线程数吗?

    我目前正在使用并行扩展 它是 Net Rx 的反应式扩展 http msdn microsoft com en us devlabs ee794896 aspx 我相信它们也可以通过 Net 4 beta 版本获得 1 有没有办法确定实际使
  • 如何修复顶部和底部边距折叠?

    我是 CSS 新手 我试图了解如何修复以下行 使其不适用于顶部和底部边距 然而 它对于侧边距来说效果很好 contents margin 10px 10px 10px 10px 例子 http jsfiddle net LCTeU http
  • AngularJS 摘要循环究竟是如何工作的?

    我是 AngularJS 的新手 我正在通过教程学习它 我对与此相关的概念有些疑问摘要循环由 Angular 提供 我的应用程序由这两个文件组成 1 索引 html