[英]Issue with pre-populating angular-ui's select2
I have an issue with angular-ui/select2 control. 我有angular-ui / select2控件的问题。
I would like to use angularjs to pre-populate the control with an array of objects . 我想使用angularjs 使用一组对象预先填充控件 。 I use the init function in order to try and achieve this but somehow, the view does not get updated on the page...
我使用init函数来尝试实现这一点,但不知何故,视图没有在页面上更新...
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 : 这是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 : 编辑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 : 编辑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)
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. 如果您从
retrieveDefaultLanguagesService.defaultLanguages()
的返回值是$q.defer().promise
然后(ha!) then
将导致摘要发生,因此$apply
,因此您的编辑是多余的。 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. 为了减少一些复杂性,我还建议删除
searchCriteria
的初始化并在then
成功回调中初始化对象结构。 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. 如果这不起作用,我可能会猜测你的HTML在某种程度上是不正确的。 if you share it you might find more help.
如果你分享它,你可能会找到更多的帮助。
I'm also using angluarjs 1.2.3 and ui-select2 with no issues 我也使用angluarjs 1.2.3和ui-select2没有问题
我忘了提到我使用角度1.2.1并根据这篇文章:( https://stackoverflow.com/a/20186141/536299 )似乎在角度js 1.2和角度ui select2之间存在不兼容性....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.