Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 预先填充angular-ui的select2的问题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有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';
});@H_944_12@ 
 

这是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
                            };
                        }
                )};
            }
        }
    };
}@H_944_12@ 
 

有人可以帮忙吗?

编辑1:

追随以下内容

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

导致以下错误

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)@H_944_12@ 
 

编辑2:

更改为以下内容

$scope.$apply(function(){
    retrieveDefaultLanguagesservice.defaultLanguages().then(function(languages){
                    $scope.searchCriteria.languages= languages; 
                });
            });@H_944_12@ 
 

导致以下错误

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)@H_944_12@

解决方法

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

if(!rootScope.$$phasE)rootScope.$apply();@H_944_12@ 
 

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

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

});@H_944_12@ 
 

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

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

大佬总结

以上是大佬教程为你收集整理的angularjs – 预先填充angular-ui的select2的问题全部内容,希望文章能够帮你解决angularjs – 预先填充angular-ui的select2的问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。