Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

ui-select broken with angular 1.5.0 beta2 #1325

Closed
LeleDev opened this issue Nov 26, 2015 · 46 comments
Closed

ui-select broken with angular 1.5.0 beta2 #1325

LeleDev opened this issue Nov 26, 2015 · 46 comments

Comments

@LeleDev
Copy link

LeleDev commented Nov 26, 2015

Ui-select doesn't work with latest angularjs updates

@LeleDev LeleDev changed the title ui-select broken with angular 1.4.8 / 1.50 beta2 ui-select broken with angular 1.4.8 / 1.5.0 beta2 Nov 26, 2015
@CrlsMrls
Copy link

Is this related with #1128?

@LeleDev
Copy link
Author

LeleDev commented Nov 27, 2015

It seems not

@crissdev
Copy link

In what is it broken? Updating the examples to use 1.4.8 seem to work just fine. Since I intend to use this in a production environment it would be very helpful if anyone can provide more info. Thanks.

http://plnkr.co/edit/4EsCcN8z3OZKYM1qjp84?p=preview
http://plnkr.co/edit/sFPmLg13rXqMuRLI7jqh?p=preview

@LeleDev
Copy link
Author

LeleDev commented Nov 28, 2015

Ok you are right, with 1.4.8 is working, only with 1.5.0 beta2 I get the following error:

Error: [ui.select:transcluded] http://errors.angularjs.org/1.5.0-beta.2/ui.select/transcluded?p0=Expected%201%20.ui-select-match%20but%20got%20'%7B0%7D'.&p1=0
    at http://localhost:9001/src/app/app_files/bower_components/ui-select/dist/select.js:119:12
    at http://localhost:9001/src/app/app_files/bower_components/ui-select/dist/select.js:972:19
    at http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:55:319
    at http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:60:159
    at O.d (http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:57:164)
    at k (http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:62:248)
    at http://localhost:9001/src/app/app_files/bower_components/ui-select/dist/select.js:960:9
    at ea (http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:76:209)
    at w (http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:64:64)
    at http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:72:176

The problem if you use this library for production is that it seems to have been quite abandoned from the maintaners... I regret to have chosen this library for my project due to the lack of support (that's why also I'm lazy to report broken stuff in the proper way, since nobody seems to really care about it)

@LeleDev LeleDev changed the title ui-select broken with angular 1.4.8 / 1.5.0 beta2 ui-select broken with angular 1.5.0 beta2 Nov 28, 2015
@crissdev
Copy link

@LeleDev Thanks for your feedback. I hope to find some good alternatives without messing around with $apply. Please let me know if you know about some of them :-)

@LeleDev
Copy link
Author

LeleDev commented Nov 30, 2015

You could give a try to the old ui-select directive repository code (when it was a wrapper for the nice select2 library: https://github.com/select2/select2) at this page: https://github.com/angular-ui/ui-select2/blob/master/src/select2.js

Unluckily there aren't many good alternative to ui-select that work out of the box... so I'm afraid that you will have to gamble and stick to this one, hoping that some new maintainers will be assigned to the project from the angular-ui team...

@nickmorton
Copy link

It seems to have been caused by this change for 1.5.0-beta.1 Lazily compile the transclude function

You can prove it by setting eager=true in the debugger.

@llafuente
Copy link

llafuente commented Dec 1, 2015

Moderator note:

This workaround should no longer be required in ui-select v0.14.3+


The workaround is really simple.

Add class to ui-select-match and ui-select-choices with the same name

See the diff @ inetsys/ng-formalizer@e186302

@nickmorton
Copy link

Nice one! Works for me.

@Luddinus
Copy link

Luddinus commented Dec 7, 2015

@llafuente It works, but WHY?

@Luddinus
Copy link

Luddinus commented Dec 7, 2015

Select2 theme does not works (it does not show the search icon etc.)

@bogdanalexe90
Copy link
Contributor

I have the same problem with angular-1.5.0-rc.0 I opened an issue for them here:
angular/angular.js#13527

@steambros
Copy link

@llafuente Thanks for the easy workaround. Works for me with angular-1.5.0-rc.0.

@brunolimawd
Copy link

Thanks @llafuente, Works for me with AngularJS v1.5.0-rc.0 👍

@amantilas
Copy link

Hi, just checking if there are any plans to resolve within ui-select without using the work-around described above, as the Angular issue has been moved to the Ice Box.

@kurtommy
Copy link

kurtommy commented Jan 6, 2016

@llafuente Thanks for the easy/crazy workaround. Works for me with angular-1.5.0-rc.0.

@valterkraemer
Copy link

Had difficulties getting bootstrap theme to work with angular-1.5.0-rc.0 . Finally got it.

Here's a working Plunker if others still have problems.

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

@chrisvel
Copy link

chrisvel commented Feb 5, 2016

+1 here

@CesarLanderos
Copy link

this is still happening in the 1.5.0 release :(

captura de pantalla de 2016-02-05 17 21 43

@ConcurrentHashMap
Copy link

The workaround from @llafuente still works with the 1.5.0. Thanks for sharing!

@avgalon
Copy link

avgalon commented Feb 7, 2016

Thanks man, works great with 1.5.
Can you please share on why exactly it works?

@hut8
Copy link

hut8 commented Feb 7, 2016

@avgalon it works because part of the compilation process takes elements called ui-select-match (and other ui-select-*) and applies the class="ui-select-*" attributes (among lots of other things). In this case, that part of the transclusion happens after the part that looks for elements with those classes, which of course is wrong. So this isn't a bad workaround at all, I don't think.

I had been debugging this last night and I thought it was because I had moved these into templates that were loaded asynchronously (there are other bugs in this project for the same thing which give the same error message). Then I realized that I had upgraded my Angular version as well (to 1.5.0), which is actually what caused it. So I can confirm this also works on 1.5.0.

@misaizdaleka
Copy link

I'm trying to override select directives so that these classes are automatically added as a part of the compilation process, rather than me adding all the classes manually in the html. No luck for the time being :(

@bubenshchykov
Copy link

@llafuente thanks a lot, this little magic worked :)
@hut8 thanks for explaining the magic!

@misaizdaleka
Copy link

Here's my fix so that you don't have to manually add classes everywhere, since this will add them automatically.

angular.module('ui.select').config(function($provide) {
    $provide.decorator('uiSelectChoicesDirective', function($delegate) {
        var directive = $delegate[0];

        var templateUrl = directive.templateUrl;

        directive.templateUrl = function(tElement) {
            tElement.addClass('ui-select-choices');
            return templateUrl(tElement);
        };

        return $delegate;
    });

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

        var templateUrl = directive.templateUrl;

        directive.templateUrl = function(tElement) {
            tElement.addClass('ui-select-match')
            return templateUrl(tElement);
        };

        return $delegate;
    });
});

@Narretz
Copy link
Contributor

Narretz commented Feb 9, 2016

Um, setting a class on an element is a workaround, not a fix. The problem is that ui-select reaches into the transcluded content before it has been compiled. It should instead wait until the transcluded content is ready. The children should require the ui-select directive and call a function in the ui-select controller when they have been linked successfully. At least that's how I would do it.

@dviramontes
Copy link

The diff by @llafuente solved it in my case.
Using ui-select 0.13.3
and angular 1.5.0

@earivasz
Copy link

@llafuente Thanks for the solution works for me with angular 1.5.0.

@joshjwalker
Copy link

@misaizdaleka where did you put that to get it to work? I have a ton of selects throughout a platform I'm working on, and adding classes is unreasonable

Narretz added a commit to Narretz/ui-select that referenced this issue Feb 12, 2016
In Angular 1.5, transcluded content is linked lazily.
For uiSelect that means the clone in the transclude function is not compiled and linked yet, so
uiSelect cannot detect the match and choices elements by their classnames, because they haven't been
set yet (which happens by replacing the elements with the templates).
However, the templateUrl function is executed at this point, so we can use it to add the
class names to the directive elements.

On another note, this behavior also affected versions earlier than 1.5.0-beta.2, when the template
of ui-select-match or ui-select-choices wasn't cached. In that case, the async compilation of
the template would mean also that the clone in the transclude function wasn't compiled yet, and so
the classes wouldn't be set either.

Closes angular-ui#1422
Closes angular-ui#1356
Closes angular-ui#1325
Closes angular-ui#1239
Narretz added a commit to Narretz/ui-select that referenced this issue Feb 12, 2016
In Angular 1.5, transcluded content is compiled lazily.
For uiSelect that means the clone in the transclude function is not compiled and linked yet, so
uiSelect cannot detect the match and choices elements by their classnames, because they haven't been
set yet (which happens by replacing the elements with the templates).
However, the templateUrl function is executed at this point, so we can use it to add the
class names to the directive elements.

On another note, this behavior also affected versions earlier than 1.5.0-beta.2, when the template
of ui-select-match or ui-select-choices wasn't cached. In that case, the async compilation of
the template would mean also that the clone in the transclude function wasn't compiled yet, and so
the classes wouldn't be set either. This might be the cause of the error described in issue angular-ui#224.

Closes angular-ui#1422
Closes angular-ui#1356
Closes angular-ui#1325
Closes angular-ui#1239
@ipavlyk
Copy link

ipavlyk commented Feb 16, 2016

@llafuente, I spent a lot of time searching for solution and got nothing. But your post save a lot of my time. Thx a lot, man)

@misaizdaleka
Copy link

@joshjwalker just put in your main js file. In my case, it was app.js.

@aaronroberson
Copy link
Contributor

The fix has been published in v0.14.3.

@chrisfosterelli
Copy link

Thanks @aaronroberson and @Narretz!

@danielolivaresd
Copy link

@llafuente Thanks for the solution! It works for me with angular 1.5.0.

@Just-Rookie
Copy link

@llafuente Thanks, it works for me with Angualr 1.5.0. But I want to know why it works when I add the class to ui-select-match and ui-select-choices with the same name. can you tell me ? Thanks a lot!

@user378230
Copy link
Contributor

llafuente Thanks, it works for me with Angualr 1.5.0. But I want to know why it works when I add the class to ui-select-match and ui-select-choices with the same name. can you tell me ? Thanks a lot!

@Just-Rookie Its a workaround not a solution (the solution is update to ui-select > v0.14.3)

See PR #1430 for details on why adding classes work.

@Just-Rookie
Copy link

@user378230 Thanks!

@crissdev
Copy link

crissdev commented Mar 8, 2016

In case someone really knows what the heck I'm doing wrong please share...This does not work.

ui-select.form-control(multiple ng-model="searchFilters.someProperty")
  ui-select-match(placeholder="{{::'Choose...' | translate}}") {{$item.text | translate}}
  ui-select-choices(repeat="filterOption.value as filterOption in searchFilters.someList track by filterOption.value")
    span {{filterOption.text | translate}}

someList is an array like [{value: 'xxxx', text: 'xxxxx'}]
searchFilters.someProperty is an array.
translate directive is from angular-gettext

All I get is Syntax Error: Token 'track' is an unexpected token at column 31 of the expression....

Thx

@Narretz
Copy link
Contributor

Narretz commented Mar 8, 2016

@crissdev posting in closed issues is not the best way to get attention to your issue

@heridev
Copy link

heridev commented Mar 23, 2016

you're right not so cool writing on closed issues.

but any of the solutions included in this thread worked for me :(, so I ended up downgrading the ui-select2 version:

Installing rails-assets-angular-ui-select 0.13.0 (was 0.14.2)

and it's working now

@user378230
Copy link
Contributor

@heridev did you see my reply? #1325 (comment)

timelf123 added a commit to linnovate/meanio-circles that referenced this issue May 17, 2016
Expected 1 .ui-select-match but got '0'.
angular-ui/ui-select#1325 (comment)
@RichardPinheiro
Copy link

RichardPinheiro commented Aug 30, 2016

@llafuente nice work my friend! very simple!

@gop-aroy
Copy link

Thank you @llafuente

@bala2e
Copy link

bala2e commented Jul 6, 2017

Hi All,
Kindly check this solution https://github.com/angular-ui/ui-select/issues/1467 too

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests