角ng-if與Kendo UI自動完成問題

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（使用$("#codPB").kendoAutoComplete() ）。 您正在混合兩種不同的方法。

在這種情況下，Kendo提供了使用angular的指令，請參見此演示 ：

HTML

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

JS

angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.countryNames = [
          "Albania",
          "Andorra",
          //[...]
          "Ukraine",
          "United Kingdom",
          "Vatican City"
              ];
      });

另一種解決方案（不太優雅）是使用ng-show而不是ng-if 。