Question

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

此输入字段动态附加到dom ready事件表单上的某个字段。 我已经这样做了，因为我没有权限编辑/修改服务器生成的html页面。即 - 使用angularjs和bootstrap angularjs动态添加一个预先输入字段。

我正在使用ui boostrap - v0.12.0，angularjs version - 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();    
});

有任何建议或意见吗？

提前致谢！

Answer 1

我开始从类别查找指令中修复它，因为它看起来很混乱，你在链接方法中编译应该在模板中的内容

foreach

然后是init函数

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

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

1 个答案:

然后是init函数