У меня есть директива, которая создает входной текстовый элемент и использует директиву ust bootstrap для присоединения функций typeahead к полю ввода.
Это поле ввода динамически добавляется к одному из полей формы в событии dom. Я должен сделать это, так как у меня нет доступа к редактированию/изменению html-страницы, сгенерированной сервером. т.е. - Динамически добавлять поле типа с использованием угловых и бутстраповных углов.
Я использую ui boostrap - v0.12.0, версия angularjs - v1.2.26 и jquery - v1.8.3
Проблема: директива не работает (или может быть неправильно скомпилирована или доступна для доступа) в IE 11, тогда как работает отлично в браузере Chrome без каких-либо проблем. Я могу видеть добавленные элементы в загрузке формы без ошибок или исключений на консоли, однако магии типа "голова".
вот то, что у меня есть -
// added required js references
// initialize angular app
var typeAheadApp = angular.module("typeAheadApp", ['smart-table', 'ui.bootstrap']);
контроллер:
typeAheadApp.controller('TypeaheadCtrl', ['$scope', '$http', '$compile', function ($scope, $http, $compile) {
$scope.getCategoriesSize = 1;
$scope.categorylkp = getCategoryField().val();
$scope.getCategories = function (val) {
return $http({
url: "/some/data/source/url",
method: 'GET',
headers: {
"Accept": "application/json;odata=verbose"
}
}).then(function (response) {
$scope.getCategoriesSize = response.data.d.results.length;
return response.data.d.results.map(function (item) {
return item.categoryName;
});
}, function (ex) {
alert("ERROR!!");
});
};
$scope.selectedCategory = function (item, model, label) {
getCategoryField().val(label);
};
$scope.updateCategory = function (setVal) {
getCategoryField().val(setVal);
};
}]);
директива:
typeAheadApp.directive('categoryLookup', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var typeAheadTemplate = angular.element('<div class="form-inline">' +
'<input id="categorylkpTxt" type="text" ng-model="categorylkp" ng-change="updateCategory(categorylkp)" typeahead="category for category in getCategories($viewValue)" typeahead-on-select="selectedCategory($item, $model, $label)" typeahead-min-length="3" typeahead-loading="loadingCategories" style="width: 345px;" autocomplete="off">' +
'</div>' +
'<div ng-show="loadingCategories">' +
'<i class="icon-refresh"></i> Loading...' +
'</div>' +
'<div ng-show="!getCategoriesSize">' +
'<i class="icon-remove"></i> No Results Found ' +
'</div>');
var compiled = $compile(angular.element('<div>').append(typeAheadTemplate).html())(scope);
element.append(compiled);
}
}
}]);
функция init:
function initTypeAhead(){
var typeAheadField = getCategoryField(); // some field on the form
typeAheadField.parent().append('<div id="typeAheadEl"><div ng-controller="TypeaheadCtrl"><div id="category-lookup" class="custom-typeahead" category-lookup></div></div></div>');
// manual bootstrapping the angular
angular.bootstrap($('#typeAheadEl'), ['typeAheadApp']);
}
angular.element(document).ready(function() {
initTypeAhead();
});
Любые советы или комментарии?
Заранее спасибо!
Я бы начал исправлять это из директивы поиска категории, поскольку она выглядит довольно запутанной, вы компилируете в методе ссылок то, что должно быть в шаблоне
typeAheadApp.directive('categoryLookup', function () {
return {
restrict: 'A',
template: '<div class="form-inline">' +
'<input id="categorylkpTxt" type="text" ng-model="categorylkp" ng-change="updateCategory(categorylkp)" typeahead="category for category in getCategories($viewValue)" typeahead-on-select="selectedCategory($item, $model, $label)" typeahead-min-length="3" typeahead-loading="loadingCategories" style="width: 345px;" autocomplete="off">' +
'</div>' +
'<div ng-show="loadingCategories">' +
'<i class="icon-refresh"></i> Loading...' +
'</div>' +
'<div ng-show="!getCategoriesSize">' +
'<i class="icon-remove"></i> No Results Found ' +
'</div>',
controller: 'TypeaheadCtrl'
}
});
function initTypeAhead(){
var typeAheadField = getCategoryField(); // some field on the form
typeAheadField.parent().append('<div id="typeAheadEl"><div id="category-lookup" class="custom-typeahead" category-lookup></div></div>');
// manual bootstrapping the angular
angular.bootstrap($('#typeAheadEl'), ['typeAheadApp']);
}
angular.element(document).ready(function() {
initTypeAhead();
});