Search code examples
javascriptangularjsangular-uiui-select2

Overriding Angular ui-select2 formatNoMatches in a directive


I've got a multiple select in a directive template and I'd like to customise the 'No matches found' message. According to the docs on http://ivaynberg.github.io/select2/, it can be done by overriding the formatNoMatches method.

Here's my select in my directive's template:

<select ui-select2="select2Options" multiple>
    <option ng-repeat="something in array">{{ something }}</option>
</select>

And this is what I've put in the link function in my directive's JS file:

...
link: function(scope, element, attributes) {
  scope.select2Options = {
    formatNoMatches: function(term) {
      return 'custom message';
    }
  };
}

However, when the select runs out of options, it still displays 'No matches found' and not 'custom message'. What am i doing wrong? Thanks.


Solution

  • I've finally managed to make it work: for some reason I haven't determined yet, setting the scope.select2Options inside a directive doesn't work, whereas it works inside a controller. I set it in the parent controller and passed it to the directive's scope with '=' and it works fine now.