angular-bootstrap下拉菜单将选项放入单独的文件中

时间:2015-12-05 03:30:48

标签: angularjs twitter-bootstrap angularjs-directive angular-bootstrap

我有这样的下拉菜单:

      <ul class="my-dropdown-menu">
        <!--<li><a href="#">Action</a></li>-->
        <li><a ng-click="onUpdateStatus()(entity, 'undelete', parent)">Undelete</a></li>
        <li><a ng-click="onUpdateStatus()(entity, 'ban', parent)">Ban</a></li>
        <li><a ng-click="onUpdateStatus()(entity, 'unban', parent)">Unban</a></li>
      </ul>

enter image description here

风格是正确的。但是现在我需要将所有删除/禁止功能放入一个单独的指令中。

    <span class="my-dropdown">
      <button type="button" data-toggle="dropdown" class="my-dropdown-toggle"><span class="my-dropdown-caret"></span></button>
      <ul class="my-dropdown-menu">
        <entity-delete-ban-tag entity="entity" on-update-status="onUpdateStatus()"></entity-delete-ban-tag>
      </ul>
    </span>

在entity-delete-ban-tag指令中,我有

<li><a ng-show="showOnDelete" ng-click="onUpdateStatus()(entity, 'delete', parent)">Delete</a></li>
<li><a ng-show="showOnUndelete" ng-click="onUpdateStatus()(entity, 'undelete', parent)">Undelete</a></li>
<li><a ng-show="showOnBan" ng-click="onUpdateStatus()(entity, 'ban', parent)">Ban</a></li>
<li><a ng-show="showOnUnban" ng-click="onUpdateStatus()(entity, 'unban', parent)">Unban</a></li>

enter image description here

enter image description here

样式不正确,可能是因为元素树结构不同[ul - > entity-delete-ban-tag - &gt; li]而不是[ul - &gt;李]直接。我必须使用自定义指令,因为delete-ban具有复杂的逻辑并且经常被重复使用。如何解决这个问题呢?

0 个答案:

没有答案