interferes with ui.bootstrap.typeahead about ui-select

[tkrotoff]

Hummm :/

Originally all ui-select directives were elements (E) only => no issue.
The problem is with IE8, the solution proposed by the AngularJS team does not fully work.

If you have a directive that uses one or more directives, then you have no choice than to use attributes (A): angular/angular.js#4020 => clash name with ui.bootstrap.typeahead

And I guess dropping IE8 support considering AngularJS 1.2 supports IE8, is a bit premature.

[tkrotoff]

@andrewboni @ProLoser @chmanie
What do you think about prefixing everything with ui-select-?

<ui-select>
  <match></match>
  <choices></choices>
</ui-select>

<ui-select>
  <ui-select-match></ui-select-match>
  <ui-select-choices></ui-select-choices>
</ui-select>

Most probably Bootstrap-ui will prefix all directives using ui-
AngularJS prefixes their directives using ng-
AngularStrap prefixes their directives using bs-

[chmanie]

Works for me 👍

[andrewboni]

yes, that works, thanks!

[andrewboni]

Any proposed timeline on this? I'm going to implement the short-term fix on this for now.

[tkrotoff]

See commit 777c804

[sheerun]

@tkrotoff Could you release it?

[t8g]

Could you re-build it ?

[WhatFreshHellIsThis]

Just hit this issue myself... +1

[sheerun]

There's release on my fork if someone really needs it

[sheerun]

Oh. I see it was released 2h ago... A comment would be nice.

[antillas21]

Hi,

I am still experiencing issues with this... I saw a comment above that a fix was released and available for version 0.8.1, so I updated ui.select to that version... and also, went ahead and updated ui.bootstrap to the latest version (0.11.2).

But even so, I get this whenever a view including the directive is loaded:

Error: [$compile:multidir] Multiple directives [match, typeaheadMatch] asking for new/isolated scope on: <div typeahead-match="" index="$index" match="match" query="query" template-url="templateUrl">

This is my bower.json file:

{
  "name": "merchantUi",
  "version": "0.0.0",
  "dependencies": {
    "modernizr": "2.8.x",
    "angular": "1.2.x",
    "jquery": "1.x.x",
    "angular-animate": "1.2.x",
    "angular-cookies": "1.2.x",
    "angular-touch": "1.2.x",
    "angular-sanitize": "1.2.x",
    "angular-resource": "1.2.x",
    "angular-ui-router": "0.2.x",
    "bootstrap-sass-official": "3.1.x",
    "angular-bootstrap": "0.11.2",
    "angular-loading-bar": "~0.5.2",
    "angular-growl-v2": "~0.7.0",
    "angular-ui-select": "0.8.1",
    "angular-ui-tree": "~2.1.5"
  },
  "devDependencies": {
    "angular-mocks": "1.2.x"
  },
  "resolutions": {
    "angular": "1.2.22",
    "angular-ui-select": "0.8.1"
  }
}

This is my angular app declaration:

angular.module('merchantUI',
      [
        'ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize',
        'ngResource', 'ui.router', 'angular-loading-bar',
        'app.config', 'angular-growl', 'ui.select',
        'ui.tree',  'ui.bootstrap'
      ]
    )

This is how I'm calling ui-select:

<div class="form-group">
  <label for="states">States Doing Business In</label>
  <ui-select multiple ng-model="userMerchant.selectedStates" ng-disabled="disabled">
    <ui-select-match placeholder="Select states...">{{$item.value}}</ui-select-match>
    <ui-select-choices repeat="state.id as state in formItems.states | filter: { value: $select.search }">
      <div ng-bind-html="state.value | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
  <span class="help-block error" ng-show="companyProfileFormErrors.states" ng-repeat="error in companyProfileFormErrors.states">{{error}}</span>
</div>

and this is how I'm calling typeahead (based on angular-bootstrap docs):

<div class="form-group">
  <label for="states">Assign user to these Locations</label>
  <input type="text" ng-model="modalOptions.args.selectedLocations" typeahead="location for location in modalOptions.args.locations | filter:$viewValue | limitTo:8" class="form-control">
</div>

[dimirc]

@antillas21 can you put together a plunker to reproduce it?

[antillas21]

@dimirc ... ooh man, this is embarrassing, but I think I have identified the reason behind this...

It's not related to your directive... it's related to a custom directive created in the project, which by the way is named match.

Thanks for your time, and apologies for this incident.