Question

如果我使用指令并且工作正常，如果我使用普通的html代码，则图标未对齐。

方法1）使用指令的字体真棒图标（图标水平未对齐）：

JS：

app.directive("roIcon", function() {
   return {
        restrict: "E",
        templateUrl: "templates/roIcon.html",
       scope: {
           type: "@"
       }
   };
});

“roIcon.html”模板：

<span ng-if="type === 'add'">
    <i class="fa fa-plus"></i>
</span>

<span class="fa-stack fa-lg stacked-icons"  ng-if="type === 'export-file'">
     <i class="fa fa-file-o fa-stack-2x"></i>
     <span class="fa-stack stack-bg">
         <i class="fa fa-arrow-right fa-small fa-stack-1x"></i>
     </span>
</span>

<span class="fa-stack fa-lg stacked-fork" ng-hide="isTile == true" ng-if="type === 'start-workflow'">
     <i class="fa fa-code-fork fa-rotate-90 fa-stack-2x"></i>
     <span class="fa-stack stack-bg">
         <i class="fa fa-plus fa-small fa-stack-1x"></i>
     </span>
</span>

html中包含的Icons指令：

<ro-icon type="add"></ro-icon>
<ro-icon type="export-file"></ro-icon>
<ro-icon type="start-workflow"></ro-icon>

方法2）将图标直接包含在html文件中工作正常：

<span>
    <i class="fa fa-plus"></i>
</span>

<span class="fa-stack fa-lg stacked-icons" title="export file">
     <i class="fa fa-file-o fa-stack-2x"></i>
     <span class="fa-stack stack-bg">
         <i class="fa fa-arrow-right fa-small fa-stack-1x"></i>
     </span>
</span>

<span class="fa-stack fa-lg stacked-fork">
     <i class="fa fa-code-fork fa-rotate-90 fa-stack-2x"></i>
     <span class="fa-stack stack-bg">
         <i class="fa fa-plus fa-small fa-stack-1x"></i>
     </span>
</span>

我在视图源中看到的唯一区别是使用指令呈现的图标包含一个包装器非html标签....，其余的html是相同的。我无法确定这个非html标签是否在对齐方面有任何差异，如图所示？感谢你的帮助..

字体真棒图标在转换为指令时未对齐

0 个答案: