Question

我刚刚在div中创建了一个自动完成的Kendo输入字段，该字段必须由ng-if控制，因为它必须仅显示给特定类别的用户。但我最终只在我的浏览器上呈现了一个没有自动完成属性的普通输入字段。如果我删除ng-if指令，或者即使我将其转换为ng-show，它也能正常工作。

这是我的HTML：

<div ng-if="utenteProfilo=='PB'">
    <label for="PB" class="col-sm-2 control-label">PB</label>
    <div class="col-sm-4">
     <input  ng-model="codPB" class="cento" id="codPB" />
     <input type="hidden" id="cognomePb" name="cognomePb" />
     <input type="hidden" id="nomePb" name="nomePb" />
    </div>
</div>

这是我的JS：

$("#codPB").kendoAutoComplete({
    placeholder: "Scegliere un PB...",
    dataTextField: 'PBanker',
    filter: "contains",
    autoBind: false,
    minLength: 3,
    headerTemplate: '<div class="dropdown-header k-widget k-header">' +
        '<span>Cognome</span>' +
        '<span>Nome</span>' +
        '</div>',
    template: '<span class="k-state-default" ></span>' +
       '<span class="k-state-default"><h6 data-recordCognomePB="#= cognome #" data-recordNomePB="#= nome #">#: data.cognome # &nbsp; #: data.nome #</h6></span>',
    select: function(e) {
                var cognomePb = e.item.find('h6').attr('data-recordCognomePB');
                var nomePb = e.item.find('h6').attr('data-recordNomePB');
            $('#cognomePb').val(cognomePb);
            $('#nomePb').val(nomePb);
       },
    filtering: function(e) {
                $('#cognomePb').val('');
                $('#nomePb').val('');
          },
     dataSource: {
        schema: {
            parse: function(response) {
              var length = response.length;
              var dataItem;
              var idx = 0;

              for (; idx < length; idx++) {
                 dataItem = response[idx];
                 dataItem.PBanker = dataItem.cognome + " " + dataItem.nome;
              }

              return response;
            }
        },
     serverFiltering: true,
         transport: {
             read: {
                 url: "http://myFile.json",
                 data: function(){
                    return {pb: $('#codPB').val()} 
                  }
             }
          },
     },
});

您是否知道有关此行为的任何问题？我表现不对吗？

Answer 1

尝试避免在使用angular时查询DOM（使用getInstrumentation().getTargetContext()）。你正在混合两种不同的方法。

在这种情况下，Kendo提供了使用angular的指令，请参阅 this demo ：

HTML

$("#codPB").kendoAutoComplete()

JS

<input kendo-auto-complete ng-model="country" 
       k-data-source="countryNames" style="width: 100%;" />

另一种解决方案（不那么优雅）是使用angular.module("KendoDemos", [ "kendo.directives" ]) .controller("MyCtrl", function($scope){ $scope.countryNames = [ "Albania", "Andorra", //[...] "Ukraine", "United Kingdom", "Vatican City" ]; });代替ng-show。

Angular ng-if与Kendo UI自动完成问题

1 个答案: