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没有问题 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容