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

Question

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

Nat*_*man 2 html javascript model-view-controller firefox angularjs

在检查从服务器下载JavaScript文件的请求时,我发现了区别.我只是想看看HTML中的链接是什么样的,但当我检查检查器时,我找不到任何JavaScript的引用.当我检查来源时,他们肯定在那里.

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

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

这是Firebug的检查员:

这是Firebug的检查员

这是从源头查看它:

从源头查看

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

有人可以解释原因吗？

编辑:

这是源代码的完整标记:

<!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>

Run Code Online (Sandbox Code Playgroud)

以下是检查器中标记的样子:

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

t.n*_*ese 5

Inspector = dom的当前状态(可以通过脚本修改),源代码=服务器发送的原始数据.

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

这就是他们没有出现在检查员身上的原因.

@Zaemz我不知道angularjs很好地告诉他们为什么删除不是模板的`script`,可能是编码指南.我自己删除它们,因为jquery曾经有过一个意想不到的行为,结果是`script`s每次执行其中一个祖先时都会被执行.错误是固定的,但为了避免这种情况再次发生,我删除它们. (2认同)

归档时间：	11 年，9 月前
查看次数：	1426 次
最近记录：	11 年，9 月前