Utilisation de la fenêtre modale dans ng-repeat

Question

j'ai un ng-repeat et j'essaie d'ajouter un modal qui transmet la même variable de portée à la fenêtre modale.Je parviens à ouvrir la fenêtre modale, mais la valeur de portée de ng-repeat ne s'affiche pas à l'intérieur du modal.J'espère que mon code explique mieux.Voici ce que j'ai jusqu'à présent :

        <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>

Le controlle:

   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',
             });

    };

});

Ce qui précède ouvre la fenêtre modale.Cependant, les détails du client tels que {{ customer.name }} de ng-repeat ne sont pas transmis dans la fenêtre modale.Ai-je un problème avec le contrôleur ?

J'essaie de créer ceci après avoir regardé l'exemple d'interface utilisateur Angular Bootrap ici : http://angular-ui.github.io/bootstrap/

MODIFIER:

Voici un exemple jsfiddle : http://jsfiddle.net/Alien_time/8s9ss/3/

Answer 1

j'ai mis à jour votre violon et sous le code également.J'espère que cela aidera.

Salutations

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;
                }
            }
             });

    };

});

Answer 2

C'est ainsi que je configure mes modaux pour gérer les éléments que je répète et que je souhaite modifier.Je suggère de le configurer pour qu'il fonctionne avec un contrôleur différent, car vous pouvez alors utiliser DI pour injecter l'élément résolu dans la portée enfant.

$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!'}); 
          }
        });
      }
    });
  };