angularjs - 预先填充 angular-ui 的 select2 的问题

Question

我对 有疑问 Angular -ui/select2 控制。

我想用angularjs来使用对象数组预填充控件 .我使用init函数来尝试实现这一点，但不知何故，页面上的 View 没有更新......

这里是 客户端模块 :

angular.module('searchEngineModule', ['ng', 'languageChooserModule','geolocationModule','currentMemberAddressModule', 'addressAutocompleteModule'])
.factory('searchEngineService',  function(){

})
.controller('searchEngineCtrl', [ '$scope', '$http', 'languageChooserService', 'retrieveDefaultLanguagesService', 'geolocationService', 'currentMemberAddressService', 'addressAutocompleteService','addressFromReferenceService',  function geolocationCtrl($scope, $http, languageChooserService, retrieveDefaultLanguagesService, geolocationService, currentMemberAddressService, addressAutocompleteService, addressFromReferenceService) {

        $scope.searchCriteria = {};

        $scope.languageChooser = languageChooserService;

        $scope.addressAutocomplete = addressAutocompleteService;

        $scope.init = function() {

            retrieveDefaultLanguagesService.defaultLanguages().then(function(languages){
                $scope.searchCriteria.languages = [{}];
                $scope.searchCriteria.languages= languages;//HERE: it does populate the model but the view is not updated...    
            });

            geolocationService.geolocationAddress().then(function(address) {
                $scope.geolocationAddress = {};
                $scope.geolocationAddress = address;
            });

            currentMemberAddressService.currentMemberAddress().then(function(address){
                $scope.currentMemberAddress = {};
                $scope.currentMemberAddress = address;
            });

        };

        $scope.$watch('addressAutocomplete', function (newVal, oldVal) {
            if (oldVal == newVal) return;
            $scope.onTheFlyAddress = {};
            if(newVal){
                addressFromReferenceService.addressFromReference(newVal.reference).then(function(address){
                    $scope.onTheFlyAddress = address;
                });
            }
        }, true);

        $scope.performSearch = function(){
            console.log('performSearch');
            console.log($scope.searchCriteria);
        };      
}])
.config(function($httpProvider) {
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json';
    $httpProvider.defaults.headers.common['X-Ajax'] = 'true';
});

这里是 语言选择模块 :

angular.module('languageChooserModule', ['ng', 'ui.select2'])
.factory('languageChooserService', function(){
    return select2Options(); 
})
.factory('retrieveDefaultLanguagesService', ['$http', '$q', function($http, $q){
    function retrieveDefaultLanguagesP(){
        var deferred = $q.defer();
        var defaultLanguages = [{}];
        $http.get('/bignibou/utils/findLanguagesByLanguageStartingWith.json', {params:{language: 'fran'}})
        .success(function(languages){
            defaultLanguages = languages;
            deferred.resolve(defaultLanguages);
        });
        return deferred.promise;
    }

    return{
        defaultLanguages: function(){
            return retrieveDefaultLanguagesP();
        }
    };
}]);

function select2Options(){

    function format(item) { 
        return item.description; 
    }

    return {    
        simple_tags: false,
        multiple : true,
        contentType: "application/json; charset=utf-8",
        minimumInputLength : 3,
        data:{ text: "description" },
        formatSelection: format,
        formatResult: format,
        ajax : {
            url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
            dataType : 'json',
            data : function(term) {
                return  {
                    language : term
                };
            },
            results : function(data, page) {
                return {
                    results :
                        data.map(function(item) {
                            return {
                                id : item.id,
                                description : item.description,
                                version : item.version
                            };
                        }
                )};
            }
        }
    };
}

有人可以帮忙吗？

编辑 1 :

更改为以下内容:

retrieveDefaultLanguagesService.defaultLanguages().then(function(languages){
                $scope.searchCriteria.languages = [{}];
                $scope.searchCriteria.languages= languages; 
                $scope.$digest();
            });

导致以下错误:

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.2.1/$rootScope/inprog?p0=%24digest
    at http://localhost:8080/bignibou/js/libs/angular.js:78:12
    at beginPhase (http://localhost:8080/bignibou/js/libs/angular.js:11878:15)
    at Scope.$digest (http://localhost:8080/bignibou/js/libs/angular.js:11412:9)
    at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
    at http://localhost:8080/bignibou/js/custom/searchEngineModule.js:18:12
    at wrappedCallback (http://localhost:8080/bignibou/js/libs/angular.js:10597:81)
    at http://localhost:8080/bignibou/js/libs/angular.js:10683:26
    at Scope.$eval (http://localhost:8080/bignibou/js/libs/angular.js:11576:28)
    at Scope.$digest (http://localhost:8080/bignibou/js/libs/angular.js:11421:31)
    at Scope.$delegate.__proto__.$digest (<anonymous>:844:31) 

编辑 2 :

更改为以下内容:

$scope.$apply(function(){
    retrieveDefaultLanguagesService.defaultLanguages().then(function(languages){
                    $scope.searchCriteria.languages= languages; 
                });
            });

导致以下错误:

Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.2.1/$rootScope/inprog?p0=%24apply
    at http://localhost:8080/bignibou/js/libs/angular.js:78:12
    at beginPhase (http://localhost:8080/bignibou/js/libs/angular.js:11878:15)
    at Scope.$apply (http://localhost:8080/bignibou/js/libs/angular.js:11675:11)
    at Scope.$delegate.__proto__.$apply (<anonymous>:855:30)
    at Scope.$scope.init (http://localhost:8080/bignibou/js/custom/searchEngineModule.js:17:11)
    at http://localhost:8080/bignibou/js/libs/angular.js:9885:21
    at Scope.$eval (http://localhost:8080/bignibou/js/libs/angular.js:11576:28)
    at pre (http://localhost:8080/bignibou/js/libs/angular.js:18210:15)
    at nodeLinkFn (http://localhost:8080/bignibou/js/libs/angular.js:6104:13)
    at compositeLinkFn (http://localhost:8080/bignibou/js/libs/angular.js:5536:15) 

Answer 1

如果您的返回值来自 retrieveDefaultLanguagesService.defaultLanguages()是 $q.defer().promise然后(哈!)then将导致出现摘要，因此 $apply ，所以你的编辑是多余的。如果您将来需要这样做(通常很少见)，您应该这样做:

if(!rootScope.$$phase)rootScope.$apply();

为了减少一些复杂性，我还建议删除 searchCriteria 的初始化。并在您的 then 中初始化您的对象结构成功回调。像这样:

retrieveDefaultLanguagesService.defaultLanguages().then(function(languages){
    $scope.searchCriteria = {languages:languages};

});

如果这不起作用，我可能会猜测您的 html 在某些方面不正确。如果您分享它，您可能会找到更多帮助。

我也在使用 angluarjs 1.2.3 和 ui-select2 没有问题