简体   繁体   English

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

[英]Is it possible to write Firefox extension via XUL and AngularJS

I know that AngularJS is framework for HTML. 我知道AngularJS是HTML的框架。

XUL(XML user interface language) and HTML have the same underlying processing (can use JavaScript and CSS) XUL(XML用户界面语言)和HTML具有相同的底层处理(可以使用JavaScript和CSS)

Can AngularJS can intergrate with XUL? AngularJS可以与XUL集成吗?

Since XUL is XML, the AngularJS syntax needs to be the XML compliant version: 由于XUL是XML,因此AngularJS语法必须是符合XML的版本:

  • add id="ng-app" to the root element in conjunction with ng-app attribute id="ng-app"到根元素并与ng-app属性一起使用

     <!doctype html> <html xmlns:ng="urn:ng" id="ng-app" ng:app="optionalModuleName"> <div my-directive="exp"></div> ... </html> 
  • Use custom element tags such as <ng:view> 使用自定义元素标记,例如<ng:view>

  • To make CSS selectors work with custom elements, the custom element name must be pre-created with document.createElement('my-tag') regardless of XML namespace. 要使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> 

the compiler now transparently supports several directive syntaxes. 编译器现在透明地支持几种指令语法。 For example while before there was just one way to use ng:include directive: . 例如,之前只有一种方法可以使用ng:include指令:。 The new compiler treats all of the following as equivalent: 新编译器将以下所有内容视为等效:

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

This will give template creators great flexibility to consider the tradeoffs between html code validity and code conciseness and pick the syntax that works the best for them. 这将为模板创建者提供极大的灵活性,可以考虑html代码有效性和代码简洁性之间的权衡,并选择最适合他们的语法。

References : 参考文献

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM