我有一个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}})不会传递到模态窗口.控制器出了什么问题?
我在这里查看Angular Bootrap UI示例后尝试创建它:http://angular-ui.github.io/bootstrap/
编辑:
这是一个jsfiddle样本:http://jsfiddle.net/Alien_time/8s9ss/3/
我还有
updated your fiddle及以下的代码.我希望这会有所帮助.
问候
var app = angular.module('app',['ui.bootstrap']); app.controller('ModalInstanceCtrl',function ($scope,$modalInstance,customer) { $scope.customer = customer; }); app.controller('CustomerController',$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; } } }); }; });