Warum wird das Tag beim Öffnen eines Modales nicht aktualisiert?

Question

Ich habe eine modale als Direktive. Das Problem ist, dass, wenn ich triying bin, um das Modal mit Daten zu öffnen, die bereits gefüllt sind, die Auswahltags nicht aktualisiert werden, bis ich das zweite Mal modal öffne.

Ich benutze Winkel und materializecss. Bitte beachten Sie, dass alle anderen Felder funktionieren, aber die Auswahl nicht vor dem zweiten Mal, wenn ich modal öffne, aber im Protokoll zeigt immer die Daten des Umfangs aktualisiert, so dass das Problem ist, dass select nicht rechtzeitig oder ähnliches gerendert wird.

JS, die das modal mit ausgefüllten Daten

$scope.update = function (customer) { 
    console.log("selected type id: "+$scope.selectedIdType) 

    $scope.isUpdating = true; 
    updateView() 
    $scope.newCustomer = customer; 
    var resultSplitTin = customer.tin.split('-'); 
    $scope.inputId = resultSplitTin[1] + (resultSplitTin.length > 2 ? '-' + resultSplitTin[2] : ''); 
    $scope.selectedIdType = resultSplitTin[0]; 
    console.log($scope.inputId) 
    $scope.inputPhone = customer.phones[0]; 
    $scope.newCustomer.zone = customer.zone; 
    console.log("selected type id after: "+$scope.selectedIdType) 

    for (var i = 0; i < $scope.zones.length; i++) { 
     // console.log(customer.zone + " == " + $scope.zones[i].code); 
     if (customer.zone == $scope.zones[i].code) { 
      $scope.newCustomer.zone = $scope.zones[i]; 
     } 
    } 


    $('#modalCustomer').openModal(); 
    $('#selectedTaxInput').material_select(); 
    $('#selectedZoneInput').material_select(); 
    $('#selectedIdInput').material_select(); 


}; 

Modal HTML (alle Eingänge aktualisieren, aber keine die Selects)

<form class="col s12" > 
      <div class="row"> 
       <div class="input-field col s4"> 
        <select id="selectedIdInput" ng-options="id for id in idTypes" ng-model="selectedIdType"> 
         <option value="" disabled selected>Elije una opci&oacute;n</option> 
        </select> 
        <label>Tipo</label> 
       </div> 
       <div class="input-field col s8"> 
        <input id="identification" type="text" class="validate" ng-class="{'valid': inputId.length > 0}" 
          ng-model="inputId"> 
        <label for="identification" 
          ng-class="{'active': inputId.length > 0}">Identificaci&oacute;n</label> 
       </div> 
      </div> 
      <div class="input-field col s12"> 
       <input id="name" type="text" class="validate" ng-class="{'valid': newCustomer.name.length > 0}" 
         ng-model="newCustomer.name"> 
       <label for="name" ng-class="{'active': newCustomer.name.length > 0}">Nombre</label> 
      </div> 
      <div class="input-field col s12"> 
       <input id="telephone" type="text" class="validate" ng-class="{'valid': inputPhone.length > 0}" 
         ng-model="inputPhone"> 
       <label for="telephone" ng-class="{'active': inputPhone.length > 0}">Tel&eacute;fono</label> 
      </div> 
      <div class="input-field col s12" > 
       <textarea id="address" class="materialize-textarea" 
          ng-class="{'valid': newCustomer.address.length > 0}" 
          ng-model="newCustomer.address"></textarea> 
       <label for="address" ng-class="{'active': newCustomer.address.length > 0}">Direcci&oacute;n</label> 
      </div> 

      <label style="margin-left:10px">Localidad</label> 

      <div id="selectedZone" class="input-field col s12 l12" input-field> 
       <select id="selectedZoneInput" ng-model="newCustomer.zone" 
         ng-options="item.code as item.name for item in zones track by item.code" 
         ng-change="showSelected()" watch> 
        <option value="" disabled selected>Elije una opci&oacute;n</option> 
       </select> 
      </div> 
     </form> 

FIX

$scope.update = function (customer) { 
    console.log("selected type id: "+$scope.selectedIdType) 

    $scope.isUpdating = true; 
    updateView() 
    $scope.newCustomer = customer; 
    var resultSplitTin = customer.tin.split('-'); 
    $scope.inputId = resultSplitTin[1] + (resultSplitTin.length > 2 ? '-' + resultSplitTin[2] : ''); 
    $scope.selectedIdType = resultSplitTin[0]; 
    console.log($scope.inputId) 
    $scope.inputPhone = customer.phones[0]; 
    $scope.newCustomer.zone = customer.zone; 
    console.log("selected type id after: "+$scope.selectedIdType) 

    for (var i = 0; i < $scope.zones.length; i++) { 
     // console.log(customer.zone + " == " + $scope.zones[i].code); 
     if (customer.zone == $scope.zones[i].code) { 
      $scope.newCustomer.zone = $scope.zones[i]; 
     } 
    } 


    $('#modalCustomer').openModal({ 
     ready: function(){ 
      $timeout(function() { 
       $('#selectedTaxInput').material_select(); 
       $('#selectedZoneInput').material_select(); 
       $('#selectedIdInput').material_select(); 
      }); 
     } 
    }); 

}; 

öffnet

Answer 1

Dies liegt daran, dass Sie jQuery verwenden, um das Modal zu öffnen und die Werte zu binden, damit Angular die Änderungen nicht erkennt. Es gibt ein Konzept von digest cycle, aufgrund dessen Angular die Ansicht aktualisiert, wenn sich der Modellwert ändert und umgekehrt.

Aber hier verwenden Sie jQuery zum Ändern von Daten im Angular-Kontext, sodass Sie Angular manuell mitteilen müssen, dass sich etwas geändert hat. Sie können dies verwenden, indem Sie $scope.$apply() aufrufen, aber es hat einige Einschränkungen, d. H. Es kann fehlschlagen und eine Ausnahme auslösen, wenn der Digest-Zyklus bereits ausgeführt wird.

So können Sie $timeout Service nutzen.

$('#modalCustomer').openModal(); 

// Assuming this selector is the modal's selector 
$('#modalCustomer').on('shown.bs.modal', function (e) { 
    $timeout(function() { 
     $('#selectedTaxInput').material_select(); 
     $('#selectedZoneInput').material_select(); 
     $('#selectedIdInput').material_select(); 
    }); 
});