Question

我知道AngularJS是HTML的框架。

XUL（XML用户界面语言）和HTML具有相同的底层处理（可以使用JavaScript和CSS）

AngularJS可以与XUL集成吗？

Answer 1

由于XUL是XML，因此AngularJS语法必须是符合XML的版本：

将id="ng-app"与ng-app属性

一起添加到根元素

<!doctype html>
<html xmlns:ng="urn:ng" id="ng-app" ng:app="optionalModuleName">
  <div my-directive="exp"></div>
...
</html>

使用自定义元素标记，例如<ng:view>

要使CSS选择器使用自定义元素，必须使用document.createElement（'my-tag'）预先创建自定义元素名称，而不管XML命名空间。

<html xmlns:ng="urn:ng">
<!-- Needed for ng namespace -->
<head>
<!--[if lte IE 8]>
<script>
// needed to make ng-include parse properly
document.createElement('ng-include');

// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<style>
ng\:view {
display: block;
border: 1px solid red;
}

ng\:include {
display: block;
border: 1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng:include></ng:include>
...
</body>
</html>

编译器现在透明地支持几种指令语法。例如，之前只有一种方法可以使用ng：include指令：。新编译器将以下所有内容视为等效：

<ng:include src="someSrc"></ng:include> <!-- XHTML element-->
<div ng:include src="someSrc"></div><!-- XHTML attribute-->
<div ng:include="someSrc"></div><!-- XHTML attribute shorthand -->

<div data-ng-include src="someSrc"></div><!-- data attribute-->
<div data-ng-include="someSrc"></div><!-- data attribute shorthand-->

<ng-include src="someSrc"></ng-include> <!-- Expando Element -->
<div ng-include src="someSrc"></div><!-- Expando Attribute-->
<div ng-include="someSrc"></div><!-- Expando attribute shorthand-->

<x-ng-include src="someSrc"></x-ng-include> <!-- Mozilla X-Tag -->

<div class="ng-include: someSrc"></div><!-- Class property-->

这将为模板创建者提供极大的灵活性，可以考虑html代码有效性和代码简洁性之间的权衡，并选择最适合他们的语法。

<强>参考：

是否可以通过XUL和AngularJS编写Firefox扩展

1 个答案: