javascript - 为什么在 AngularJS 的 todomvc 示例中，<script> 标签没有出现在 Firefox 的检查器中，而是用于源代码？-6ren

javascript - 为什么在 AngularJS 的 todomvc 示例中，<script> 标签没有出现在 Firefox 的检查器中，而是用于源代码？

转载作者：太空宇宙更新时间：2023-11-04 15:09:55

我在检查从服务器下载 JavaScript 文件的请求是什么样子时发现了不同之处。我只是想看看链接在 HTML 中的样子，但是当我检查检查器时，我找不到任何对任何 JavaScript 的引用。当我检查来源时，它们肯定在那里。

您可以在此处查看示例:http://todomvc.com/architecture-examples/angularjs/#/

我似乎无法弄清楚为什么。

这是在 Firebug 的检查器中:

Here it is in Firebug's inspector

这是从源代码查看时的样子:

View from source

还有一些元素属性似乎在两者之间消失了。

谁能解释一下为什么？

编辑:

这是来自源代码的完整标记:

<!doctype html>
<html lang="en" data-framework="angularjs">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>AngularJS • TodoMVC</title>
        <link rel="stylesheet" href="bower_components/todomvc-common/base.css">
        <style>[ng-cloak] { display: none; }</style>
    </head>
    <body ng-app="todomvc">
        <ng-view />

        <script type="text/ng-template" id="todomvc-index.html">
            <section id="todoapp" ng-controller="TodoCtrl">
                <header id="header">
                    <h1>todos</h1>
                    <form id="todo-form" ng-submit="addTodo()">
                        <input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
                    </form>
                </header>
                <section id="main" ng-show="todos.length" ng-cloak>
                    <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
                    <label for="toggle-all">Mark all as complete</label>
                    <ul id="todo-list">
                        <li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
                            <div class="view">
                                <input class="toggle" type="checkbox" ng-model="todo.completed">
                                <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
                                <button class="destroy" ng-click="removeTodo(todo)"></button>
                            </div>
                            <form ng-submit="doneEditing(todo)">
                                <input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEditing(todo)" ng-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
                            </form>
                        </li>
                    </ul>
                </section>
                <footer id="footer" ng-show="todos.length" ng-cloak>
                    <span id="todo-count"><strong>{{remainingCount}}</strong>
                        <ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
                    </span>
                    <ul id="filters">
                        <li>
                            <a ng-class="{selected: status == ''} " href="#/">All</a>
                        </li>
                        <li>
                            <a ng-class="{selected: status == 'active'}" href="#/active">Active</a>
                        </li>
                        <li>
                            <a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a>
                        </li>
                    </ul>
                    <button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
                </footer>
            </section>
            <footer id="info">
                <p>Double-click to edit a todo</p>
                <p>Credits:
                    <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
                    <a href="http://ericbidelman.com">Eric Bidelman</a>,
                    <a href="http://jacobmumm.com">Jacob Mumm</a> and
                    <a href="http://igorminar.com">Igor Minar</a>
                </p>
                <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
            </footer>
        </script>
        <script src="bower_components/todomvc-common/base.js"></script>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers/todoCtrl.js"></script>
        <script src="js/services/todoStorage.js"></script>
        <script src="js/directives/todoFocus.js"></script>
        <script src="js/directives/todoEscape.js"></script>
    </body>
</html>

检查器中的标记如下所示:

<!DOCTYPE html>
<html lang="en" data-framework="angularjs">
  <head>
    <style type="text/css">
      @charset "UTF-8";
      [ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{
        display:none !important;
      }ng\:form{
        display:block;
      }
    </style>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>
      AngularJS • TodoMVC
    </title>
    <link href="bower_components/todomvc-common/base.css" rel="stylesheet">
    <style>
      [ng-cloak] {
        display: none;
      }
    </style>
  </head>
  <body class="learn-bar ng-scope" ng-app="todomvc">
    <aside class="learn">
      <header>
        <h3>
          AngularJS
        </h3>
        <span class="source-links">
          <h5>
            Architecture Example
          </h5>
          <a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs">
            Source
          </a>
          <h5>
            Dependency Example
          </h5>
          <a class="demo-link" href="http://todomvc.com/labs/dependency-examples/angularjs_require">
            Demo
          </a>
          ,
          <a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/dependency-examples/angularjs_require">
            Source
          </a>
          <h5>
            AngularJS Optimized
          </h5>
          <a class="demo-link" href="http://todomvc.com/architecture-examples/angularjs-perf">
            Demo
          </a>
          ,
          <a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs-perf">
            Source
          </a>
          <h5>
            TypeScript & AngularJS
          </h5>
          <a class="demo-link" href="http://todomvc.com/labs/architecture-examples/typescript-angular">
            Demo
          </a>
          ,
          <a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/typescript-angular">
            Source
          </a>
        </span>
      </header>
      <hr>
      <blockquote class="quote speech-bubble">
        <p>
          HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
        </p>
        <footer>
          <a href="http://angularjs.org">
            AngularJS
          </a>
        </footer>
      </blockquote>
      <hr>
      <h4>
        Official Resources
      </h4>
      <ul>
        <li>
          <a href="http://docs.angularjs.org/tutorial">
            Tutorial
          </a>
        </li>
        <li>
          <a href="http://docs.angularjs.org/api">
            API Reference
          </a>
        </li>
        <li>
          <a href="http://docs.angularjs.org/guide">
            Developer Guide
          </a>
        </li>
        <li>
          <a href="http://builtwith.angularjs.org">
            Applications built with AngularJS
          </a>
        </li>
        <li>
          <a href="http://blog.angularjs.org">
            Blog
          </a>
        </li>
        <li>
          <a href="http://docs.angularjs.org/misc/faq">
            FAQ
          </a>
        </li>
        <li>
          <a href="http://www.youtube.com/angularjs">
            AngularJS Meetups
          </a>
        </li>
      </ul>
      <h4>
        Articles and Guides
      </h4>
      <ul>
        <li>
          <a href="http://www.codeschool.com/code_tv/angularjs-part-1">
            Code School AngularJS course
          </a>
        </li>
        <li>
          <a href="http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features">
            5 Awesome AngularJS Features
          </a>
        </li>
        <li>
          <a href="http://briantford.com/blog/angular-yeoman.html">
            Using Yeoman with AngularJS
          </a>
        </li>
        <li>
          <a href="http://stephenplusplus.github.io/meangular">
            me&ngular - an introduction to MVW
          </a>
        </li>
      </ul>
      <h4>
        Community
      </h4>
      <ul>
        <li>
          <a href="http://www.youtube.com/playlist?list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz">
            Walkthroughs and Tutorials on YouTube
          </a>
        </li>
        <li>
          <a href="https://groups.google.com/forum/?fromgroups#!forum/angular">
            Google Groups mailing list
          </a>
        </li>
        <li>
          <a href="http://stackoverflow.com/questions/tagged/angularjs">
            angularjs on Stack Overflow
          </a>
        </li>
        <li>
          <a href="https://twitter.com/angularjs">
            AngularJS on Twitter
          </a>
        </li>
        <li>
          <a href="https://plus.google.com/+AngularJS/posts">
            AngularjS on Google +
          </a>
        </li>
      </ul>
      <footer>
        <hr>
        <em>
          If you have other helpful links to share, or find any of the links above no longer work, please
          <a href="https://github.com/tastejs/todomvc/issues">
            let us know
          </a>
          .
        </em>
      </footer>
    </aside>
    <ng-view class="ng-scope">
      <section id="todoapp" class="ng-scope" ng-controller="TodoCtrl">
        <header id="header">
          <h1>
            todos
          </h1>
          <form id="todo-form" class="ng-pristine ng-valid" ng-submit="addTodo()">
            <input id="new-todo" class="ng-pristine ng-valid" autofocus="" ng-model="newTodo" placeholder="What needs to be done?">
          </form>
        </header>
        <section id="main" class="ng-hide" ng-show="todos.length">
          <input id="toggle-all" class="ng-pristine ng-valid" type="checkbox" ng-click="markAll(allChecked)" ng-model="allChecked">
          <label for="toggle-all">
            Mark all as complete
          </label>
          <ul id="todo-list">

          </ul>
        </section>
        <footer id="footer" class="ng-hide" ng-show="todos.length">
          <span id="todo-count">
            <strong class="ng-binding">
              0
            </strong>
            <ng-pluralize when="{ one: 'item left', other: 'items left' }" count="remainingCount">
              items left
            </ng-pluralize>
          </span>
          <ul id="filters">
            <li>
              <a class="selected" href="#/" ng-class="{selected: status == ''} ">
                All
              </a>
            </li>
            <li>
              <a href="#/active" ng-class="{selected: status == 'active'}">
                Active
              </a>
            </li>
            <li>
              <a href="#/completed" ng-class="{selected: status == 'completed'}">
                Completed
              </a>
            </li>
          </ul>
          <button id="clear-completed" class="ng-binding ng-hide" ng-show="completedCount" ng-click="clearCompletedTodos()">
            Clear completed (0)
          </button>
        </footer>
      </section>
      <footer id="info" class="ng-scope">
        <p>
          Double-click to edit a todo
        </p>
        <p>
          Credits:
          <a href="http://twitter.com/cburgdorf">
            Christoph Burgdorf
          </a>
          ,
          <a href="http://ericbidelman.com">
            Eric Bidelman
          </a>
          ,
          <a href="http://jacobmumm.com">
            Jacob Mumm
          </a>
          and
          <a href="http://igorminar.com">
            Igor Minar
          </a>
        </p>
        <p>
          Part of
          <a href="http://todomvc.com">
            TodoMVC
          </a>
        </p>
      </footer>
    </ng-view>
  </body>
</html>

最佳答案

Inspector = dom 的当前状态(可能被脚本修改)，源代码 = 服务器发送的原始数据。

某些元素，如用于存储模板或其他数据的 script，在读取其内容以保持 dom 清洁后，通常会被库从 dom 中删除。

这就是为什么它们不会出现在检查器中的原因。

关于javascript - 为什么在 AngularJS 的 todomvc 示例中，<script> 标签没有出现在 Firefox 的检查器中，而是用于源代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21056753/

文章推荐： css - 为什么悬停对一个链接有效但对另一个链接无效？

文章推荐： java - Android-使用 Android Studio 导入外部库

文章推荐：悬停时CSS3暗图像

文章推荐： java - std::round(double) 的 java 等价物是什么？

javascript - 使用 jQuery 检查 radio 时，检查 radio 是否被选中不起作用
我需要根据需要动态设置文本区域，但它不想正常工作。 JQuery 会自行检查，但无法检查是否已检查。但是当您在第二个单选框内单击时，始终需要文本区域。我尝试了很多次让它工作，但它仍然有问题。我添加了“
python - Django : Fetch XML, 中的 urllib2/pycurl 检查 HTTP 状态，检查 HTTPS 连接
我需要在 Django 中进行 API 调用(某种形式)，作为我们所需的自定义身份验证系统的一部分。用户名和密码通过 SSL 发送到特定 URL(对这些参数使用 GET)，响应应该是 HTTP 200
检查#warning预处理器的可用性
我将在我的可移植 C 代码中使用 #warning 来生成编译时警告。但并非所有平台都支持 #warning。有什么方法可以找到该平台是否支持 #warning。 #ifdef warning
检查 for 语句中的条件
我编写了一个函数来检查某个数字是否存在于某个区间内。停止搜索的最佳方法是什么？这个: for (i = a; i <= b; i++) { fi = f(i); if (fi == c) {
检查 C 中的不同字符
我想知道在 c 中是否有一种方法可以检查，例如在 for 函数中，如果变量等于或不等于某些字符，而不必每次都重复进行相等性检查。如果我没记错的话，以这种方式检查相等性是不正确的: if (a == (
检查 C 中是否有可变参数
我有如下日志功能 void log_error(char * file_name, int line_num, int err_code) { printf("%s:%d:%s\n", fil
检查 SSH 私钥是否加密
使用 ssh-keygen 生成的 key 对在 macOS 上可以有不同的格式。 macOS 可读的标准 PEM ASN.1 对象 SecKey API 带有文本标题的 PEM OpenSSH ke
Excel:检查 IF 语句中的错误
我正在尝试编写一个 excel if 语句。我不熟悉使用 Excel 具有的所有额外功能。我正在使用一个名为 importXML() 的函数.我正在尝试检查我正在使用的函数是否生成“#VALUE!”错
检查 aio_write 是否完成
有没有办法检查是否没有 AIO 写入给定文件？我在我的 Unix 类(class)上制作了一个项目，该项目将是一个上下文无关(基于 UDP)的国际象棋服务器，并且所有数据都必须存储在文件中。应用程序将
java - 执行函数时避免连续的 "if (...)"检查
我有一个如下所示的函数: public Status execute() { Status status = doSomething(); if (status != Stat
php - 抑制特定文件夹或文件的错误消息/检查
我正在使用 Composer，我不希望 PhpStorm 在 vendor 文件夹上运行任何错误检查或检查，因为它对 vendor/中的某些代码显示误报composer/autoload_static
chapel - 检查/确保两个数组具有相同的域和分布的最佳方法是什么？
Chapel 的一个很好的特性是它区分了数组的域和它的分布。检查两个数组是否具有相同的域和分布(通常想要的)的最佳方法是什么？我能看到的最好的方法是检查 D1==D2和 D1.dist==D2.di
JavaScript:检查/比较所有字段的值
在我的 JavaScript 函数中，我为所有输入、文本区域和选择字段提供实际值作为 initial_value: $('input, textarea, select').each(function
PHP ErrorFlag 检查？
我正在编写一个分解为几个简单函数的 PHP 类。在构造函数中，它调用另一个名为 processFile 的函数。该函数调用 5 个私有(private)函数并进行检查。如果检查失败，它会将消息分配给
javascript - 检查 "how"链接被点击
这个问题已经有答案了: How to detect if user it trying to open a link in a new tab? (2 个回答) 已关闭 7 年前。我认为 JavaS
sql - 检查@@rowcount函数来确定行是否存在可以吗？
我正在浏览我们的代码库并看到很多这样的测试: declare @row_id int = ... declare @row_attribute string select @row_attribu
javascript - 检查 IF 语句内的函数解释
我正在声明一个用作比较的函数。我的问题是: 为什么条件充当语句？为什么第 4 行可以工作，而第 5 行却不行？我知道这段代码不切实际且未使用，但为什么编译器允许这种语法？谷歌没有找到答案。但话又
PHP - 检查/比较文本字段的输入
到目前为止，我有一个带有空文本字段的 PHP Kontaktform，并使用以下命令检查了所需的字段: $name = check_input($_POST['name'], "请输入姓名。"); 现
PHP 检查 not > 0
目前，我能想到的合理检查的唯一方法没有臃肿的逻辑: if ( $value > 0 ) { // Okay } else { // Not Okay } 有没有更好的办法？最佳答案
javascript - 检查[i]是否存在
我正在尝试运行一个脚本，如果 i 存在(意味着存在 i 值，任何值)或其他部分，我希望运行其中的一部分如果i没有值就运行，有人可以启发我吗？我说的是 for 循环，比如 for (var i=0;

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么在 AngularJS 的 todomvc 示例中，<script> 标签没有出现在 Firefox 的检查器中，而是用于源代码？