Angular ui-select error: 404 (Failed to load the template)

Question

Anyone have a problem with angular -ui-select ?

Getting this error

GET http://localhost/select2/select.tpl.html 404 (Not Found) angular.js:8539 Error: [$compile:tpload] Failed to load template: select2/select.tpl.html 

From the documentation - I just needed to specify select.js and select.css

Answer 1

Try using the select.css and select.js files from the / dist directory instead of the files from / src .

Answer 2

You also need templates - look in the src folder. There are 3 topics.

When you include a selection on your page, you indicate which one you want to use:

 <ui-select ng-model="boo.selected" theme="resources/templates/select2" ng-disabled="disabled"> 

Here above I put the path to the templates

Answer 3

You get this error because the template in the error message is not loading in templateCache. You are probably using a version of select.js that does not contain templates.

You will also find that not every template was created for each type of selection. For instance. There are no Selectize patterns for multiselect which can also cause similar errors.

If you look at the end of select.js source , you will see how you can load templates or even define your own templates.

In your case:

 angular.module("ui.select").run(["$templateCache", function($templateCache){ $templateCache.put("select2/select.tpl.html","<div class=\"ui-select-container select2 select2-container\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open,\n \'select2-container-disabled\': $select.disabled,\n \'select2-container-active\': $select.focus, \n \'select2-allowclear\': $select.allowClear && !$select.isEmpty()}\"><div class=\"ui-select-match\"></div><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"select2-search\" ng-show=\"$select.searchEnabled\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ui-select-search select2-input\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div></div>"); }]);