Getting Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'.

[DineshkumarT]

I have used the following snippet to create the dropdown
ui-select ng-model="option.name" theme="select2" ng-disabled="disabled" style="width: 100%">
ui-select-match placeholder="Select">{{$select.selected.name || $select.selected}}
/ui-select-match>
ui-select-choices repeat="option in options.options | filter: $select.search">
div ng-bind-html="options.name | highlight: $select.search">
/ui-select-choices>
/ui-select>

But I am facing the error
Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'.

Referenced the plunker http://plnkr.co/edit/1D614lgGZmRkff9jG2GR?p=preview to develop.

Help me out -

-Dinesh

[a-reznic]

pls help

[dimirc]

I opened the plunker to refer to, but works ok. Can you tell me how to reproduce that error?

[NewMediaRoc]

I have the same issue . My use-case is that I'm attempting to include the match and choices via a second directive, similar to this: http://plnkr.co/edit/9IZ0aW?p=preview
(Note: it works in this plnkr because it's using an older version of ui-select).

[a-reznic]

v1.2.26 all is ok

[brunopaz]

with angular > 1.3 the problem is back again

[dimirc]

@brunopaz I updated plunker for v1.3.1 and its working, how can I reproduce your error?

[sime]

I get this error when I am trying to use a custom (Bootstrap based) theme.
If select-multiple.tpl.html arrives before choices.tpl.html or match-multiple.tpl.html the above error occurs.

Is it possible to wrap the template calls into a single promise?

[mattsharpe]

+1
I can see the same happening. I turned on fiddler and sure enough when select-multiple.tpl.html is the first template returned the error occurs.

[sime]

I have found it quite easy to reproduce the select-multiple.tpl.html compiling early in this plunker:

http://plnkr.co/edit/THkOHjK59vS9XlMRRdmf?p=preview

[sime]

My workaround is to cache the templates myself inside of a $q.all(). Then in the markup I use a ngIf on uiSelectTemplateReady to display the directives. Not sure if this is optimal, but after a few minutes of testing it seems to work.

var templatePath = uiSelectConfig.theme;
$scope.uiSelectTemplateReady = false;
$q.all([
    $http.get(templatePath + '/choices.tpl.html', {cache: $templateCache}),
    $http.get(templatePath + '/match-multiple.tpl.html', {cache: $templateCache}),
    $http.get(templatePath + '/select-multiple.tpl.html', {cache: $templateCache})
])
.then(function (res) {
    $scope.uiSelectTemplateReady = true;
    return res;
});

[noelking]

This looks like a race issue here that occurs, particularly on first load and I have been trying to get to the bottom of it with no joy so far. Unfortunately none of the templateCache solutions mentioned have really worked. I can see the problem comes down to the number of transcludedMatch.length in this line of code "if (transcludedMatch.length !== 1) {" especially as ui-select-match is being used

<ui-select ng-model="gender.selected" title="Gender" class="form-control cp-select" >
                                    <ui-select-choices repeat="gender in genders | filter: $select.search">
                                        <div  ng-bind-html="gender | highlight: $select.search"></div>
                                    </ui-select-choices>
                                    <ui-select-match class="cp-select-question" placeholder="Gender"><span class="cp-select-question">{{$select.selected}}</span></ui-select-match>
                                </ui-select>

It does not happen everytime, but if I test with private or incognito browsing its easier to reproduce. I am using the latest version of select-ui and angular 1.3.15

Any help here would be really appreciated.

Thanks

[melloc01]

👍 same here, ui-select works but it show same errors.

I'm also using another directive to compile ui-select html templates.

[arteme]

I am using the work-around posted by @sime just extended to all ui-select templates:

        $scope.uiSelectTemplateReady = false;
        var base = '...';
        $q.all([
            $http.get(base + '/choices.tpl.html', {cache: $templateCache}),
            $http.get(base + '/match.tpl.html', {cache: $templateCache}),
            $http.get(base + '/select.tpl.html', {cache: $templateCache}),
            $http.get(base + '/match-multiple.tpl.html', {cache: $templateCache}),
            $http.get(base + '/select-multiple.tpl.html', {cache: $templateCache})
        ])
        .then(function (res) {
            $scope.uiSelectTemplateReady = true;
            return res;
        });