Question

我正在为我的项目使用此https://github.com/amitava82/angular-multiselect多选下拉列表。

在我的HTML中：

<am-multiselect class="sv-manage-multiselect-dropdown"
                 ng-model="nameList.name"
                 options="name as name.key for name in nameList"
                 multiple="true"                  
</am-multiselect>

这个下拉列表有一个＆＃34; checkall＆＃34;和＆＃34; uncheckall＆＃34;下拉列表中的按钮，我想删除，同时保持多选的功能。

这是该人使用的指令中的html：

的src / multiselect.tmpl.html

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}">
        {{header}}
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <input class="form-control input-sm" type="text" ng-model="searchText.label" ng-keydown="keydown($event)" autofocus="autofocus" placeholder="Filter" />
        </li>
        <li ng-show="multiple" role="presentation" class="">
            <button class="btn btn-link btn-xs" ng-click="checkAll()" type="button"><i class="glyphicon glyphicon-ok"></i> Check all</button>
            <button class="btn btn-link btn-xs" ng-click="uncheckAll()" type="button"><i class="glyphicon glyphicon-remove"></i> Uncheck all</button>
        </li>
        <li ng-repeat="i in items | filter:searchText" ng-class="{'selected': $index === selectedIndex}">
            <a ng-click="select(i); focus()">
            <i class='glyphicon' ng-class="{'glyphicon-ok': i.checked, 'empty': !i.checked}"></i> {{i.label}}</a>
        </li>
    </ul>
</div>

我不想删除/覆盖checkall和uncheckall按钮而不编辑此库的指令。我可以在我的个人file.css中覆盖CSS，但是如何覆盖他使用的HTML模板。感谢

Answer 1

我认为有三种方法可以做到：

添加您自己的模板以替换此模板（reference）：
```
<script type="text/ng-template" id="multiselect.tmpl.html">
  html template without buttons here
</script>
```
这方面的潜在问题是，无论在何处使用，您都会覆盖此模板。但也许你是在一堆地方使用它，这是有道理的。

在指令中添加一个装饰器，删除在编译阶段你不想要的模板部分，并允许指令的其余部分像往常一样执行：

decorator('amMultiselectPopupDirective' ['$delegate', function($delegate) {
  var directive = $delegate[0];
  var compile = directive.compile;

  directive.compile = function(tElement, tAttrs) {
    var link = compile.apply(this, arguments);

    if (tAttrs.disableCheckAll) {
      tElement.find('li[ng-show="multiple"]').remove();
      // this code could be different, but the gist is that it would remove or hide the stuff you don't want
    }
    return function() {
      link.apply(this, arguments);
    };
  };
  return $delegate;
}]);

这里的潜在问题是，您将在使用该指令的任何地方更改此指令的模板。这就是为什么在我的示例中，我根据您可以定义的某个属性（例如disableCheckAll）使模板更改为条件。

使用已为此指令定义的template-url属性，并创建自己没有这些按钮的模板：

<script type="text/ng-template" id="yourowntemplate.html">
  html template without buttons here
</script>

<am-multiselect ...
  template-url="yourowntemplate.html">
</am-multiselect>

我会说3可能是最好的方法。但是如果你想覆盖默认值，1可以更好地工作，然后你每次使用template-url指令时都不必传递am-multiselect。

修改：以下是3：http://plnkr.co/edit/m0lZSHUJ8MHslqCNPnCc?p=info

Answer 2

用自己的div与班级重叠他的指令：＆＃34; no-btns＆＃34;
添加此css： .no-btns .dropdown-menu li：nth-child（2）{display：none;}

示例：

<style>
  .no-btns .dropdown-menu li:nth-child(2) {
    display:none;
  }
</style>
<div class="no-btns">
  <am-multiselect class="sv-manage-multiselect-dropdown"
                  ng-model="nameList.name"
                  options="name as name.key for name in nameList"
                  multiple="true"                  
  </am-multiselect>
</div>

如何覆盖外部html模板angular.js

2 个答案: