ui boostrap typeahead 指令在包装在指令中并动态加载时不起作用

Question

我有一个创建输入文本元素并使用 ui bootstrap 指令将预输入功能附加到输入字段的指令。

此输入字段在 dom 就绪事件时动态附加到表单上的字段之一。 我必须这样做，因为我无法访问由服务器 生成的 edit/modify html 页面。即 - 使用 angularjs 和 bootstrap angularjs 动态添加预输入字段。

我正在使用 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);                       
            }
        }
    }]);

初始化函数：

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();    
});

有什么建议或意见吗？

提前致谢！

Answer 1

我会从类别查找指令开始修复它，因为它看起来相当混乱，您正在使用 link 方法编译模板中应该包含的内容

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();    
});

ui boostrap typeahead 指令在包装在指令中并动态加载时不起作用

ui boostrap typeahead directive doesn't work when wrapped in a directive and loaded dynamically

angularjs

angular-ui-bootstrap

然后初始化函数