问题与预填充角UI的select2

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然后（哈哈！）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选择2 ....