2013-06-27 11 views
5

Ho una schermata di informazioni in cui sto utilizzando un ripetitore per creare informazioni su un utente specifico.AngularJS - Trasferisci dati oggetto nel modale

Quando si fa clic sul pulsante "Modifica", come posso passare i dati dell'oggetto utente specifico nel modello di finestra modale?

HTML

<form class="custom" ng-controller="DepCtrl" ng-cloak class="ng-cloak"> 
<fieldset ng-repeat="object in data.dataset"> 
<legend><span>{{ object.header }}</span><span class="dep_rel">({{ object.relation }}) </span></legend> 
    <div class="row"> 
     <div class="four columns" ng-repeat="o in object.collection.inputs"> 
      <span class="table_label">{{ o.label }}:</span><span class="table_answer">{{ o.value }}</span><br> 
     </div> 
    </div> 
    <div class="row"> 
     <a ng-click="openDialog('edit')" style="color:#444;text-decoration:none;margin-right:10px;margin-top:5px;" class="btn_gray smaller left" href="#">Edit</a> 
     <a style="color:#444;text-decoration:none;margin-top:5px;" class="btn_gray smaller" href="#">Delete</a>  
    </div> 
</fieldset> 
</form> 

JS

function DepCtrl($scope, Dependents, $dialog) { 
$scope.data = Dependents; 

var t = '<div class="modal-header">'+ 
     '<h3>' + $scope.header.value + '</h3>'+ 
     '</div>'+ 
     '<div class="modal-body">'+ 
     '<p>Enter a value to pass to <code>close</code> as the result: <input ng-model="result" /></p>'+ 
     '</div>'+ 
     '<div class="modal-footer">'+ 
     '<button ng-click="close(result)" class="btn btn-primary" >Close</button>'+ 
     '</div>'; 

$scope.opts = { 
backdrop: true, 
keyboard: true, 
dialogFade: true, 
backdropClick: false, 
template: t, // OR: templateUrl: 'path/to/view.html', 
controller: 'TestDialogController' 
}; 

$scope.openDialog = function(action){ 
var d = $dialog.dialog($scope.opts); 
//if (action === 'edit') { $scope.opts.templateUrl = '../../modal.html'; } 
d.open().then(function(result){ 
    if(result) 
    { 
    alert('dialog closed with result: ' + result); 
    } 
}); 
}; 
} 

risposta

9

Aiuta a sapere quali $ servizio dialogo si fa riferimento esattamente, in quanto dialogo $ non è la parte di AngularJS nucleo API. Supponendo che si stia utilizzando il servizio di dialogo $ da ui-bootstrap, è possibile passare l'oggetto utente nel controller di dialogo tramite la proprietà resolve di $ dialog configuration object.

Come il $dialog documentation afferma che:

risolvere: i membri che saranno risolti e passati al controllore come locali

function DepCtrl($scope, Dependents, $dialog) { 
    $scope.data = Dependents; 

    $scope.opts = { 
    backdrop: true, 
    keyboard: true, 
    dialogFade: true, 
    backdropClick: false, 
    template: t, // OR: templateUrl: 'path/to/view.html', 
    controller: 'TestDialogController', 
    resolve: { 
     user: function(){ 
     return $scope.data; 
     } 
    } 
    }; 

    $scope.openDialog = function(action){ 
    var d = $dialog.dialog($scope.opts); 
    d.open(); 
    }; 

} 

/** 
* [TextDialogController description] 
* @param {object} $dialog instance 
* @param {mixed} user User object from the resolve object 
*/ 
function TextDialogController(dialog, user){ 
    ... 
} 
+0

E se la promessa non viene risolto? Penso che la finestra di dialogo non si aprirà, ma possiamo eseguire il nostro codice personalizzato in quel caso, cioè come gestire la promessa respinta? per esempio: mostrare un brindisi o qualcosa del genere. – vivek

Problemi correlati