Dwukierunkowe łączenie Databinding z Angular-UI Select2 z funkcjonalnością Ajax

Question

Dwukierunkowe łączenie Databinding z AngularJS + Angular-UI Select2 z funkcjonalnością Ajax.

Utworzono dyrektywę, aby zaimplementować rozwijane działanie Ajax w stylu Select2 w sposób ogólny: - (To wymaga kilku atrybutów, aby uzyskać formatResult, formatSelection metody wywoływania i URL).

Mój problem polega na tym, jak załadować wartość w "Tryb edycji", wybrana wartość z listy rozwijanej jest odbierana w metodzie selectselection, ale podczas ładowania ekranu, chcę załadować menu z tej samej wartości, do której jest wiązane. Przykład: -

<input type="hidden" for="part" class="bigdrop" style="width: 250px" formatresult="partFormatResult" formatselection="partFormatSelection" aurl="/api/Part" search-drop-down ui-select2="configPartSelect2" ng-model="product.SalesPart" data-placeholder="Select Part" ng-change="onPartSelect();" /> 

    Directive Code 

    One23SRCApp.directive('searchDropDown', ['$http', function (http) { 
     return function (scope, elm, attrs) { 
      var raw = elm[0]; 
      var fetchFuncName = "fetch" + attrs["uiSelect2"]; 
      console.log("Directive load pat " + scope[attrs["ngModel"]]); 
      scope[fetchFuncName] = function (queryParams) { 
       var result = http.get(queryParams.url, queryParams.data).success(queryParams.success); 
       result.abort = function() { 
        return null; 
       }; 
       return result; 
      }; 


      scope[attrs["uiSelect2"]] = { 
       minimumInputLength: 3, 
       initSelection: scope[attrs["initselection"]], 
       ajax: { 
        url: attrs["aurl"], 
        data: function (term, page) { 
          return { params: { isStockable: true, query: term, pageNo: page, pageSize: 20 } }; 
        }, 
        dataType: 'json', 
        quietMillis: 100, 
        transport: scope[fetchFuncName], 
        results: function (data, page) { 
         var more = (page * 20) <= data.length; // whether or not there are more results available 
         return { results: data, more: more }; 
        } 
       }, 
       formatResult: scope[attrs["formatresult"]], 
       formatSelection: scope[attrs["formatselection"]], 
       dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
      }; 

      return { bind: attrs["ngModel"] }; 
     }; 

    }]); 

//inside controller- 
after loading of data 
    $("#partDD").select2("val", product.SalesPart); 
//$scope.partInitSelection definition. 
    $scope.partInitSelection = function (element, callback) { 
     if (! $scope.PartList) { 
      $scope.PartList = [$scope.product.SalesPart]; 
     } else { 
      $scope.PartList.push($scope.product.SalesPart); 
     } 
     callback($scope.product.SalesPart); 
    }; 

} 

Answer 1

stałej w końcu: - Jak już przechowywane obiektu konfiguracji w zakresie [attrs [ "uiSelect2"]] nazwałem .ajax.data method of powyższego celu konfiguracji przy każdym ładowania dane.

scope[attrs["uiSelect2"]].ajax.results(product.SalesPart.text, 1);