ng-repeat中使用模態窗口

Question

我有一個ng-repeat，我試圖添加一個模式，將相同的範圍變量傳遞給模態窗口。我能夠打開模式窗口，但是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> 

控制器：

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

    }; 

}); 

上述打開模式窗口。但是，來自ng-repeat的客戶詳細信息（例如{{customer.name}}不會傳遞到模式窗口中。我的控制器有問題嗎？

我想在看角Bootrap UI例如這裏之後創建此：http://angular-ui.github.io/bootstrap/

編輯：

這裏是一個的jsfiddle樣本：http://jsfiddle.net/Alien_time/8s9ss/3/

Answer 1

我已經updated your fiddle及以下代碼。我希望這會有所幫助。

問候

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

這是怎麼了我設置我的模式處理項目，我重複，並想編輯。我建議將它設置爲使用不同的控制器，因爲那樣你可以使用DI將已解析的項目注入到子範圍。

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