Two way Databinding with Angular-UI Select2 with Ajax functionality

Question

Two way Databinding with AngularJS + Angular-UI Select2 with Ajax functionality.

I created a directive to implement Select2 dropdown Ajax behavior in Generic way:- (It requires few attributes to get formatResult, formatSelection methods to call, and url).

My problem is how to load value in "Edit Mode", selected value from dropdown is received in formatselection method, but while loading the screen, I want to load the dropdown from the same value to which it is binded. Example:-

    <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

最后解决了这个问题： - 由于我将配置对象保留在范围[attrs [“uiSelect2”]]中，每次加载数据时都会调用上面配置对象的.ajax.data方法。

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