angulaire ui-select ngModel ne sont pas synchronisées automatiquement

Question

J'ai un ui-sélection pour afficher une liste des objets personnalisés

app { 
    store: 'Apple App Store' 
    storeId: '12341234' 
} 

Ceci est ma directive pour app-list-tag:

<div ng-if="entities" class="tag-picker-tag"> 
    tags 
    <ui-select ng-model="$parent.entities" multiple tagging theme="bootstrap"> 
    <ui-select-match>{{$item}}</ui-select-match> 
    <ui-select-choices repeat="empty in []"></ui-select-choices> 
    </ui-select> 
    <p>Selected: {{entities}}</p> 
</div> 

<app-tag mode="create" page="list" entity-info="entityInfo" on-create="createEntity"></app-tag> 

javascript:

$scope.entityInfo = helper.getEntityInfoForCreate(constant.entityTypes.app) 

$scope.createEntity = function() { 
    for (var i = 0; i < $scope.entities.length; i++) { 
     if (angular.equals($scope.entities[i], $scope.entityInfo)) { 
      $scope.entityInfo = {} 
      return 
     } 
    } 
    $scope.entities.push($scope.entityInfo) 
    $scope.entityInfo = {} 
    //Note: need to copy in order to trigger validation 
    $scope.entities = angular.copy($scope.entities) 
} 

$scope.$watch('entities', function(newValue, oldValue) { 
    if (newValue) { 
     $scope.refreshShownHidden() 
    } 
}, true) 

Le app-tag est simplement une directive avec 2 entrées (store et storeId) et 1 bouton Envoyer.

<div class="my-form-group"> 
    <select ng-model="entityInfo.store" ng-options="option.value as option.display for option in storeOptions" class="my-form-control"></select> 
</div> 

<div class="my-form-group"> 
    <label for="create_store_id">App ID: </label> 
    <input ng-model="entityInfo.storeId" id="create_store_id" placeholder="Enter App ID" class="my-form-control"> 
</div> 


<div class="my-form-group"> 
    <button ng-show="showOnCreate" ng-click="onCreate()(entityInfo)" class="my-button-success">Create</button> 
    <button ng-show="showOnCancel" ng-click="onCancel()(entityInfo)" class="my-button">Cancel</button> 
</div> 

Lorsque je crée la liste, tout fonctionne. mais lorsque j'actualise la page et que je la modifie, la commande ui-select affiche les attributs corrects, mais ne peut pas mettre à jour mon modèle ng lorsque je supprime ou ajoute des éléments. La fonction $watch est également appelée.

J'ai essayé d'utiliser refresh = "afunction()" mais toujours le même résultat.

Remarque: Je ne veux pas afficher la liste de choix, car les infos de l'application sont saisies manuellement dans mon app-tag.

Answer 1

Probablement un bug avec ui-select et angular's $parent solution de contournement/hack. Vous devriez utiliser un objet wrapper à la place. Assurez-vous de $watch dans les deux directions

//create a wrapper when `entities` is assigned 
$scope.$watch('entities', function(newValue, oldValue) { 
    if (newValue) { 
     $scope.entities = newValue 
     if ($scope.wrapper) 
      $scope.wrapper.entities = newValue 
     else 
      $scope.wrapper = {entities: newValue} 
    } 
}, true) 

//assign back to `entities` 
$scope.$watch('wrapper.entities', function(newValue, oldValue) { 
    if (newValue) { 
     //copy to trigger validation directive (you can't deep compare in validator) 
     $scope.entities = angular.copy($scope.wrapper.entities) 
    } 
}, true)