Ошибка углового ui-select: 404 (Не удалось загрузить шаблон)

Question

Любой, у кого есть проблема с использованием angular-ui-select?

Получение этой ошибки

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

Из документации - я просто необходимо ссылаться на select.js и select.css

Answer 1

Попробуйте использовать select.css и select.js файлы из каталог/dist вместо файлов из каталога/src.

Answer 2

Вы должны шаблоны, а также - смотрите в папку Src. Есть 3 темы.

При включении выберите в вашу страницу вы указать, какой вы хотите использовать:

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

Здесь выше я поставил путь к шаблонам

Answer 3

Вы получаете эту ошибку, поскольку шаблон в сообщении об ошибке не загружается в шаблонCache. Вероятно, вы используете версию select.js, которая не содержит шаблонов.

Также вы обнаружите, что не каждый шаблон был создан для каждого типа выбора. Например. нет шаблонов Selectize для multiselect, которые также могут вызывать подобные ошибки.

Если вы посмотрите на конец select.js source, вы увидите, как вы можете загрузить шаблоны или даже определить свой собственный шаблон.

В вашем случае:

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>"); 
}]);