预填充角用户界面的select2问题

Question

我对angular-ui/select2控件有一个问题。

我想使用angularjs来，用的对象数组预先填充控件。我使用init函数来尝试实现这一点，但不知怎么的，视图没有在页面上更新.

这里是客户端模块

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';
});

这是languageChooserModule

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，那么(ha!) then将导致出现摘要，从而导致$apply，因此您的编辑是多余的。如果你将来需要这样做(通常是罕见的)，你应该这样做：

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

为了降低一些复杂性，我还建议删除searchCriteria的初始化，并在then成功回调中初始化对象结构。如下所示：

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

});

如果这不起作用，我可能会猜你的html在某种程度上是不正确的。如果你分享它，你可能会得到更多的帮助。

我还使用angluarjs1.2.3和ui-select2 2，没有任何问题。

Answer 2

我忘记提到我使用了角1.2.1，根据这篇文章：(https://stackoverflow.com/a/20186141/536299)在角js1.2和角ui select2.之间似乎存在着不兼容。