Question

我是Javascript世界的新手并且在做Angular.JS。我写了一个简单的hello world代码，我使用ng-controller为'Hello World'分配一个变量，然后用HTML绑定值。

    <div ng-controller="Controller">{{DisplayData}}</div>

我的控制器是

function Controller（$ scope）{ $ scope.DisplayData =“Hello World”; }

当我运行代码时，它正如我预期的那样正确显示“Hello World”。出于好奇，我检查了后面的代码，并期望div中的'Hello World'，而是显示我的HTML代码中带有角度指令。
我读了http://docs.angularjs.org/guide/concepts#startup中的文档，希望能够了解它为什么要这样做，但我不确定我是否理解。
所以这是我的问题;我认为HTML是静态的，浏览器会按原样呈现HTML。因此，如果我们需要创建任何动态的东西，我们在创建最终的DOM对象之前，通过java脚本评估值并用实际值替换它们。是理解错了吗？

Answer 1

当您使用JavaScript更改HTML页面时，您实际上并没有更改页面的代码，而是在内存中调用DOM，并且最初是通过读取后面的代码创建的。您在查看页面源或类似内容时看到的内容始终是浏览器从服务器获取的原始代码。大多数浏览器中都有工具以文本形式查看DOM。例如，Chrome中的F12将调出开发工具。这将向您展示JavaScript操作的结果。

Answer 2

当您使用Javascript框架来操作页面时，这会在DOM或HTML加载后发生，因此您在视图源中看到的DOM仍然是来自服务器的DOM。如果您使用的是Chrome和“Inspect Element”，您将看到Hello World的最新html。

为什么后面的HTML代码仍然显示角度代码而不是普通的HTML？

2 个答案: