加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:18:29 所属栏目:安全 来源:网络整理
导读:我有angular-ui / select2控件的问题. 我想使用angularjs使用一组对象预先填充控件.我使用init函数来尝试实现这一点,但不知何故,视图没有在页面上更新… 这里的客户端模块: angular.module('searchEngineModule',['ng','languageChooserModule','geolocatio
我有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','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)

解决方法

如果您从retrieveDefaultLanguagesService.defaultLanguages()的返回值是$q.defer().promise然后(ha!)那么将导致摘要发生,因此$apply,因此您的编辑是多余的.如果您将来需要这样做(通常很少见),您应该这样做:

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

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

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

});

如果这不起作用,我可能会猜测你的HTML在某种程度上是不正确的.如果你分享它,你可能会找到更多的帮助.

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读