6

Ho un ng-repeat e sto provando ad aggiungere un modal che passa la stessa variabile scope alla finestra modale. Sono in grado di aprire la finestra modale ma il valore di scope da ng-repeat non viene mostrato all'interno del modal. Spero che il mio codice spieghi meglio. Questo è quello che ho finora:Utilizzo della finestra modale all'interno di ng-repeat

 <div ng-controller="CustomerController"> 
     <div ng-repeat="customer in customers"> 
       <button class="btn btn-default" ng-click="open()">{{ customer.name }}</button> 

       <!--MODAL WINDOW--> 
       <script type="text/ng-template" id="myModalContent.html"> 
        <div class="modal-header"> 
         <h3>The Customer Name is: {{ customer.name }}</h3> 
        </div> 
        <div class="modal-body"> 
          This is where the Customer Details Goes<br /> 
          {{ customer.details }} 
        </div> 
        <div class="modal-footer"> 

        </div> 
       </script> 

     </div> 
     </div> 

Il controllore:

app.controller('CustomerController', function($scope, $timeout, $modal, $log, customerServices) { 
    $scope.customers= customerServices.getCustomers(); 

    // MODAL WINDOW 
    $scope.open = function() { 

     var modalInstance = $modal.open({ 
      templateUrl: 'myModalContent.html', 
      }); 

    }; 

}); 

Quanto sopra si apre la finestra modale. Tuttavia, i dettagli del cliente come {{customer.name}} dalla ng-repeat non vengono passati alla finestra modale. Ho qualcosa di sbagliato con il controller?

Sto cercando di creare questa dopo aver guardato l'esempio angolare Bootrap UI qui: http://angular-ui.github.io/bootstrap/

EDIT:

Ecco un esempio jsfiddle:http://jsfiddle.net/Alien_time/8s9ss/3/

risposta

12

Ho updated your fiddle e sotto codice pure. Spero che possa aiutarti.

saluti

var app = angular.module('app', ['ui.bootstrap']); 

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, customer) 
{ 
$scope.customer = customer; 

}); 

app.controller('CustomerController', function($scope, $timeout, $modal, $log) { 

    $scope.customers = [ 
     { 
     name: 'Ricky', 
     details: 'Some Details for Ricky', 
     }, 
     { 
     name: 'Dicky', 
     details: 'Some Dicky Details', 
     }, 
     { 
     name: 'Nicky', 
     details: 'Some Nicky Details', 
     } 
    ]; 

    // MODAL WINDOW 
    $scope.open = function (_customer) { 

     var modalInstance = $modal.open({ 
      controller: "ModalInstanceCtrl", 
      templateUrl: 'myModalContent.html', 
      resolve: { 
       customer: function() 
       { 
        return _customer; 
       } 
      } 
      }); 

    }; 

}); 
+0

Questo è perfetto! Ha funzionato dopo aver passato l'ambito 'customer' a' open() 'e poi restituito i dati' customer' al 'ModalInstanceCtrl' da elaborare. GRAZIE HEAP! Questo è esattamente ciò che stavo avendo problemi con. Saluti! – Neel

2

Ecco come Ho impostato le mie modal per gestire gli oggetti che ho ripetuto e voglio modificare. Suggerisco di configurarlo per funzionare con un controller diverso, perché in questo modo è possibile utilizzare DI per iniettare l'elemento risolto nell'oscilloscopio secondario.

$scope.openModal = function(item) 
    // This sets up some of the options I want the modal to open with 
    var options = {} 
    angular.extend(options, { 
     templateUrl: '/views/userItems/form.html', 
     controller: 'ItemEditController', 
     resolve: { 
     // I resolve a copy of the so it dont mess up the original if they cancel 
     item: function() { return angular.copy(item); } 
     } 
    }); 
    $modal.open(options).result.then(function(updatedItem) { 
     // after the user saves the edits to the item it gets passed back in the then function 
     if(updatedItem) { 
     // this is a service i have to deal with talking to my db 
     modelService.editItem(updatedItem).then(function(result) { 
      // get the result back, error check then update the scope 
      if(result.reason) { 
      $scope.addAlert({type: 'error', title: 'Application Error', msg: result.reason}); 
      } else { 
      angular.extend(vital, result); 
      $scope.addAlert({type: 'success', msg: 'Successfully updated Item!'}); 
      } 
     }); 
     } 
    }); 
    }; 
+0

ho aggiunto un campione jsfiddle qui: http://jsfiddle.net/Alien_time/8s9ss/3/ Sareste in grado di darmi un esempio su come posso affrontare il mio codice per favore? – Neel