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在某些方面是不正确的。如果你分享它，你可能会找到更多的帮助。

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

Answer 2

我忘了提到我使用角度1.2.1并根据这篇文章：（https://stackoverflow.com/a/20186141/536299）似乎角度js 1.2和角度ui select2之间存在不兼容性....

预填充angular-ui select2的问题

2 个答案: