All geek questions in one place

Is it possible to write a Firefox extension through XUL and AngularJS

I know that AngularJS is the foundation for HTML.

XUL (XML user interface language) and HTML have the same basic processing (JavaScript and CSS can be used)

Can AngularJS interact with XUL?

+4
source share
1 answer

Because XUL is XML, AngularJS syntax must be an XML compatible version:

  • add id="ng-app" to the root element in combination with the ng-app attribute

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

  • To make CSS selectors work with custom elements, the name of the custom element must be pre-created using document.createElement ('my-tag') regardless of the XML namespace.

     <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, so far there was only one way to use the ng: include directive :. 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 developers more flexibility to consider the trade-offs between the reliability of the HTML code and the multiplicity of the code and choose the syntax that works best for them.

References

0
source

Source: https://habr.com/ru/post/1500174/

More articles:


All Articles