Ajax 기능이있는 Angular-UI Select2를 사용한 양방향 데이터 바인딩

Question

양방향 기능 Ajax 기능이있는 AngularJS + Angular-UI Select2를 사용한 양방향 데이터 바인딩.

일반 방식으로 Select2 드롭 다운 Ajax 동작을 구현하기위한 지시문을 만들었습니다. - (formatResult, formatSelection 메서드를 호출하고 URL을 얻으려면 속성이 거의 필요하지 않습니다.)

내 문제는 "편집 모드"에서 값을로드하는 방법입니다. 드롭 다운에서 선택한 값이 formatselection 메서드에서 수신되었지만 화면을로드하는 동안 바인드 된 것과 동일한 값에서 드롭 다운을로드하려고합니다. 예 -

<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

마침내 수정 - 전 범위에서 구성 객체를 유지 같이 바인드합니다는 [ "uiSelect2은"], 제가 상기 구성 객체의 .ajax.data 방법을 I로드마다 호출 데이터.

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