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

时间:2013-09-02 15:39:28

标签: angularjs firefox firefox-addon xul

我知道AngularJS是HTML的框架。

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

AngularJS可以与XUL集成吗?

1 个答案:

答案 0 :(得分:0)

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

<强>参考