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

Question

我正在为我的项目使用这个 https://github.com/amitava82/angular-multiselect 多 select 下拉菜单。

在我的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>

此下拉菜单中有一个 "checkall" 和 "uncheckall" 按钮，我想将其删除，同时保留多 select 的功能。

这是这个家伙使用的指令中的 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>

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

Answer 1

将他的指令与您自己的 div 和 class 重叠："no-btns"
添加此 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>

Answer 2

我看到了 3 种方法：

添加你自己的模板来替换这个像这样 (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 可以更好地工作，然后你就不必在每次使用 am-multiselect 指令时都传入 template-url。

编辑： 这是 3 的工作示例：http://plnkr.co/edit/m0lZSHUJ8MHslqCNPnCc?p=info

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

How to override an external html template angular.js

html

javascript

multi-select

angularjs