CODEWITHSUNDEEP
angularjsangular-uiangularjs-select2
balteo
balteo

Reputation: 24659

Issue with pre-populating angular-ui's select2

I have an issue with angular-ui/select2 control.

I would like to use angularjs to pre-populate the control with an array of objects. I use the init function in order to try and achieve this but somehow, the view does not get updated on the page...

Here the client module:

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

Here is the 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
                            };
                        }
                )};
            }
        }
    };
}

Can anyone please help?

edit 1:

Chaging to the following:

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

Causes the following Error:

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)

edit 2:

Changing to the following:

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

causes the following error:

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)

Upvotes: 4

Views: 1922

Answers (2)

calebboyd
calebboyd

Reputation: 5753

If your return value from retrieveDefaultLanguagesService.defaultLanguages() is a $q.defer().promise then (ha!) then will cause a digest to occur and therefore $apply, so your edits are redundant. If you need to do that in the future (usually rare) you should do it this way:

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

To reduce some complexity I would also suggest removing the initialization of searchCriteria and initializing your object structure within your then success callback. Like this:

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

});

If that doesn't work I might guess that your html is incorrect in some way. if you share it you might find more help.

I'm also using angluarjs 1.2.3 and ui-select2 with no issues

Upvotes: 4

balteo
balteo

Reputation: 24659

I forgot to mention that I use angular 1.2.1 and according to this post: (https://stackoverflow.com/a/20186141/536299) there appears to be an incompatibility between angular js 1.2 and angular ui select2....

Upvotes: 1

Related Questions