La promessa aperta modale dell'interfaccia utente angolare viene risolta prima che venga mostrato modale

Question

Sto provando a eseguire uno script jQuery sul modulo aperto per trasformare uno dei campi in uno jQuery UI Spinner.

Sto utilizzando la promessa opened come documentato in Angular UI.

EDIZIONE: Il selettore jQuery non funziona come previsto e non recupera nulla.

Così una delle funzioni del mio controller sembra che:

var modalInstance = $modal.open({ 
    templateUrl: 'modalDialog.html', 
    controller: modalCtrl, 
    resolve: { 
     noOfItems: function(){ 
      return $scope.noOfItems; 
     } 
    } 
}); 

modalInstance.opened 
    .then(function() { 
     $(".spinner").spinner({ 
      max: 20, 
      min: 1 
     }); 
    }); 

modalInstance.result 
    .then(function() { 
     console.log("modal closed"); 
    }); 

E il mio HTML:

<script type="text/ng-template" id="modalDialog.html"> 
    <div class="modal-header"> 
     <h4 class="modal-title">My Modal</h4> 
    </div> 
    <div class="modal-body"> 
     <input class="form-control spinner" type="text" ng-model="noOfItems" /> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-default" ng-click="cancel()">Cancel</button> 
     <button class="btn btn-primary" ng-click="save()">Save</button> 
    </div> 
</script> 

Il modalCtrl è irrilevante.

SUGGERIMENTO: Ho provato a mettere un debugger destra quando il opened promessa viene chiamato e scoperto il modale non è ancora aperto.

FYI, sto usando jQuery 1.9.0, jQuery UI 1.10.4, AngularJS 1.2.16 e Angular UI Bootstrap v0.11.

Answer 1

Si sta avvicinando il problema dall'angolo sbagliato, cercando di eseguire una manipolazione DOM di basso livello da un controller. Questo è un grande no-no nel mondo di AngularJS e ti porterai in tutti i tipi di problemi lungo la strada.

La logica dell'interfaccia utente non deve essere "in attesa" di un determinato nodo DOM da aggiungere alla struttura DOM ma piuttosto dovrebbe essere espressa in modo dichiarativo. In questo caso particolare vuol dire che si dovrebbe scrivere un "slider" direttiva, qualcosa di semplice come:

yourModule.directive('mySpinner', function() { 
    return { 
    link: function(scope, elm) { 
     elm.spinner({ 
     max: 20, 
     min: 1 
     }); 
    } 
    }; 
}); 

e quindi utilizzare questa direttiva appena definito dal all'interno HTML di modal:

<input class="form-control spinner" type="text" my-spinner ng-model="noOfItems"/> 

Questo non devi preoccuparti quando il contenuto modale viene aggiunto al DOM e ti sei fatto un favore di avere un modo riutilizzabile di definire i filatori!

Tornando al $ modali legate domanda - il opened promessa viene risolto quando tutti i dati sono pronti e modali sta per essere mostrato (inizia animazione ecc) per essere in grado di visualizzare gli indicatori in attesa o simili. In nessun modo è stato progettato per sapere quando il contenuto modale viene inserito nell'albero DOM come con AngularJS questa conoscenza non è realmente necessaria la maggior parte del tempo.