Is it possible to dynamically change the angular bootstrap uib-dropdown templateUrl?

Question

I want to dynamically change the template uib-dropdownwhen the user clicks one of them <li>, just like he could "move" in this drop-down list.

I tried to do this through templateUrl, but neither ng-templates, nor stand-alone partial files will be able to successfully change the dropdown list template, as shown by plunkr demonstrates.

My goal is to create granular navigation on this drop-down menu to visually visualize the query, as shown on Tracker Sprinter (account required) , something really looks like Pure Angular Advanced Searchbox , but I have problems with this library.

Is it possible to achieve this using only AngularJS and angular-bootstrap?

Answer 1

Demo (try the last one):

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

How to make it work?

Based on your plunkr you have to change

<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>

to

<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>

Which ng-if="ctrl.dropdownReady"moves to div.input-group.

And change

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;

to

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;
});

What has a $timeoutwrap vm.dropdownReady = true;. And you must enter $timeoutmanually;

A menu will open

, 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 undefined at beginning
}

, , , .

?

:

$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 -url . ul . uib-dropdown-menu template-url ul. , -url angular.

vm.dropdownReady = true; , vm.dropdownReady = false; , , angular "ng-if", dom. vm.dropdownReady , angular .

Answer 2

EDIT: template-url var, , , "" , , "", "" .

, , .

uib template-url.

- none