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

【问题标题】：Is it possible to write Firefox extension via XUL and AngularJS是否可以通过 XUL 和 AngularJS 编写 Firefox 扩展
【发布时间】：2013-09-02 15:39:27
【问题描述】：

我知道 AngularJS 是 HTML 框架。

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

AngularJS 可以与 XUL 集成吗？

【问题讨论】：

IIRC，jQuery 需要补丁才能与 XUL 一起使用（例如：关于如何引用全局窗口/文档及其功能的假设）。我怀疑 Angular 可能有同样的问题。
stackoverflow.com/questions/19093931/… 它可以工作，但请查看问题中的update 部分以了解可能出错的情况。
@HMR 这不算数 - 他仍在 HTML 上使用 Angular，它只是嵌入在 XUL 中。我认为 OP 想在 XUL 上使用 angular。
@Naatan 我很确定在 XUL 上它不会工作，因为 location.replaceState 是不允许的（XUL 或 chrome 类型的 iframe/浏览器元素）。他/我正在使用填充整个 XUL 窗口的浏览器元素。

标签： angularjs firefox firefox-addon xul

【解决方案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 选择器与自定义元素一起使用，无论 XML 命名空间如何，都必须使用 document.createElement('my-tag') 预先创建自定义元素名称。

<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 代码有效性和代码简洁性之间的权衡，并选择最适合他们的语法。

参考文献：

【讨论】：