Question

我希望在用户点击其中一个uib-dropdown时动态更改<li>模板，就像他可以＆＃34;导航＆＃34;在那个下拉列表中。

我尝试通过templateUrl制作，但ng-templates或独立部分也无法动态更改下拉模板，就像plunkr所示。

我的目标是通过此下拉列表创建分面导航，以便在视觉上构建查询，如Fieldbook's Sprint tracker (account required)所示，这与Pure Angular Advanced Searchbox非常相似，但我在使用此问题时遇到了大量问题库。

使用AngularJS和angular-bootstrap可以实现吗？

Answer 1

编辑：您应该使用控制器var分配template-url的值，该控制器var会随着用户选择任何选项而更改，然后您重新制作＆＃34;这个组件，这样＆＃34; new＆＃34;下拉是＆＃34;重新粉刷＆＃34;使用新模板。

是的，根据the official documentation可行，但我以前从未这样做过。

您可以指定名为template-url的 uib-dropdown-menu settings 。

根据文件

默认值为无

和

您可以为下拉菜单指定模板

Answer 2

演示（尝试最后一个）：

http://plnkr.co/edit/1yLmarsQFDzcLd0e8Afu?p=preview

如何让它发挥作用？

根据你的plunkr，你应该改变

<div class="input-group" uib-dropdown auto-close="disabled">
    <input type="text" class="form-control" placeholder="Click to start a visual query search..." autocomplete="off" uib-dropdown-toggle/>
    <ul class="dropdown-menu" role="menu" ng-if="ctrl.dropdownReady" uib-dropdown-menu template-url="{{ctrl.dropdownTemplateFour}}">
    </ul>
    <span class="input-group-btn">
    <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
    </button>
    </span>
</div>

到

<div class="input-group" uib-dropdown auto-close="disabled"  ng-if="ctrl.dropdownReady">
    <input type="text" class="form-control" placeholder="Click to start a visual query search..." autocomplete="off" uib-dropdown-toggle/>
    <ul class="dropdown-menu" role="menu" uib-dropdown-menu template-url="{{ctrl.dropdownTemplateFour}}">
    </ul>
    <span class="input-group-btn">
    <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
    </button>
    </span>
</div>

将ng-if="ctrl.dropdownReady"移至div.input-group。

并改变

vm.dropdownReady = false;
console.log('vm.dropdownReady =', vm.dropdownReady, ' partial = ', partial);
switch (template) {
  case 'word':
    partial ? vm.dropdownTemplateFour = 'word-dropdown-dom.template.html' : vm.dropdownTemplateThree = 'word-dropdown-dom.html';
    break;
  case 'main':
    partial ? vm.dropdownTemplateFour = 'main-dropdown-dom.template.html' : vm.dropdownTemplateThree = 'main-dropdown-dom.html';
    break;
}
vm.dropdownReady = true;

到

vm.dropdownReady = false;
console.log('vm.dropdownReady =', vm.dropdownReady, ' partial = ', partial);
switch (template) {
  case 'word':
    partial ? vm.dropdownTemplateFour = 'word-dropdown-dom.template.html' : vm.dropdownTemplateThree = 'word-dropdown-dom.html';
    break;
  case 'main':
    partial ? vm.dropdownTemplateFour = 'main-dropdown-dom.template.html' : vm.dropdownTemplateThree = 'main-dropdown-dom.html';
    break;
}
$timeout(function(){
  vm.dropdownReady = true;
});

$timeout包裹vm.dropdownReady = true;。你应该手动注入$timeout;

保持菜单打开

根据documentation，我们可以选择is-open attr的下拉菜单的初始状态。我们可以使用on-toggle attr收听切换事件。因此，如果我们想在用户点击输入后保持菜单打开，我们应该像这样设置uib-dropdown的属性：

<div class="input-group" uib-dropdown auto-close="disabled"  ng-if="ctrl.dropdownReady" is-open="ctrl.open" on-toggle="ctrl.toggled(open)">

在控制器中：

vm.toggled = function (open) {
    // the parameter `open` is maintained by *angular-ui/bootstrap*
    vm.open=open;//we don't need to init the `open` attr, since it's undefined at beginning
}

完成这些操作后，一旦菜单打开，它就不会在用户再次点击输入的情况下关闭。

为什么？

让我们检查snippet：

$templateRequest(self.dropdownMenuTemplateUrl)
    .then(function(tplContent) {
    templateScope = scope.$new();
    $compile(tplContent.trim())(templateScope, function(dropdownElement) {
        var newEl = dropdownElement;
        self.dropdownMenu.replaceWith(newEl);//important
        self.dropdownMenu = newEl;
        $document.on('keydown', uibDropdownService.keybindFilter);
    });
});

上面的代码段显示 angular-ui / bootstrap 如何使用 template-url attr来检索模板并使其生效。它用新创建的元素替换原始ul元素。这就是点击uib-dropdown-menu后template-url和ul丢失的原因。由于它们不存在，因此您无法再使用角度绑定更改模板网址。

在vm.dropdownReady = true;无效后立即执行vm.dropdownReady = false;的原因是，角度无法检测此更改并执行＆＃34; ng-if＆＃34;实际上删除了dom。您必须使vm.dropdownReady的异步切换为角度提供实现此目的的机会。

是否可以动态更改角度bootstrap uib-dropdown templateUrl？

2 个答案:

演示（尝试最后一个）：

如何让它发挥作用？

保持菜单打开

为什么？