Question

以下是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，我喜欢创建符合XML标准的所有html文档。我尝试调整示例并将其另存为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-Namespace和文件扩展名＆＃34; .xhtml＆＃34;。没有任何错误或任何错误。它只是显示页面，就像没有角度一样。

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

Answer 1

执行此操作的最佳方法之一是使用HTML / XHTML data-属性。您可以编写有效的HTML和XHTML，而无需包含任何角度命名空间。这将如下：

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

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

虽然现在这似乎是一个合适的解决方法，但我仍然想知道问题是什么......

如何组合angularjs和xhtml？

2 个答案: