如何结合angularjs和xhtml？答案

【问题标题】：How to combine angularjs and xhtml?如何结合angularjs和xhtml？
【发布时间】：2014-04-20 18:14:36
【问题描述】：

这是 angularjs 的一个最小示例，保存为 angular.html 时可以使用：

<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" ng:app="">
<head>
  <title>My HTML File</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body>

  <p>Nothing here {{'yet' + '!'}}</p>

</body>
</html>

但是，我坚信 XML，并且我喜欢创建我的所有 html 文档 XML 兼容。我尝试修改示例并将其保存为angular.xhtml：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng:app="">
<head>
  <title>My HTML File</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
</head>
<body>

  <p>Nothing here {{'yet' + '!'}}</p>

</body>
</html>

最大的变化是 xhtml 命名空间和文件扩展名“.xhtml”。没有错误或任何东西。只是页面显示得好像没有angular一样。

如何让 angularjs 使用符合 XML 的文件？

【问题讨论】：

您使用的是 HTML5 而不是 XHTML Doctype。
@klingt.net：据我所知，这符合 html 规范，该规范定义了推荐的 doctype，并且还允许交付内容类型为 application/xhtml+xml 的 HTML5 文档。

标签： angularjs

【解决方案1】：

最好的方法之一是使用 HTML/XHTML data- 属性。您可以编写有效的 HTML 和 XHTML，而不必包含任何 Angular 命名空间。如下所示：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-ng-app="">
<head>
  <title>My HTML File</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
</head>
<body>

  <p>Nothing here {{'yet' + '!'}}</p>

</body>
</html>

当涉及到所有其他 Angular 声明时，这也是有益的，例如 ng-repeat 和 ng-show 等。

<div ng-repeat="item in items">{{item.name}}</div> // This won't validate.
<div data-ng-repeat="item in items">{{item.name}}</div> // This will validate.

请注意，您的引导 Angular 应用程序的解决方案也是有效的 - 但它并不能真正解决您遇到的问题。（这只是加载 Angular 应用程序的另一种方式，它恰好适合您的情况，因为您的标记中没有任何其他 ng- 指令。）

查看类似问答here.

【讨论】：

【解决方案2】：

我找到了使用手动设置的解决方案。然后代码如下所示：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>My HTML File</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
    <script type="text/javascript">
        angular.module('myApp', []);

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</head>
<body>

  <p>Nothing here {{'yet' + '!'}}</p>

</body>
</html>

虽然目前这似乎是一个合适的解决方法，但我仍然很想知道问题出在哪里...

【讨论】：