使用：
- Twitter的引导
- AngularJs
这是故事
创建表：使用“ng-repeat”动态创建行。第一个单元格（连续）中的数据项具有触发Twitter-Bootstrap模式的点击事件。模态中的输入字段与[table]行中的列匹配。用户编辑该行中的必要数据。这应该更新数据库，更改立即反映在表中。
但是，我无法从表格中获取数据以填充模态字段。
这是奇怪的事情......如果我使用Twitter-Bootstrap（TBS）弹出窗口而不是TBS模式，一切正常。的一切即可。所有数据都填充在弹出域内，它是可编辑的，它实际上保存到数据库，并更新表行！但弹出窗口很糟糕，我被禁止使用它们。
使用EXACT SAME代码，为什么数据不会填充在模态中？ 显然，这使我相信使用语法相同的代码，弹出窗口和模态不会以相同的方式运行。但为什么呢？
我已经完成的研究，以及我在这里以及TBS和AngularJS上所阅读的文档，要么过于庞大，要么完全没有帮助。
总结一下，这是我想要实现的功能：
这是代码的要点（弹出窗口有效，而模态则没有）。
免责声明：我无法让它在这里工作（SO或jfiddle）我可能错过了一个参考。但我知道你们都比我聪明，而且凭借我所给予的，我对这个社区充满信心，能够弄清楚我做错了什么。
我事先感谢你们的帮助。
<!DOCTYPE html>
<html ng-app="person">
<head>
<title>HELP ME WITH MODALS</title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="PersonCtrl">
<table style="border:1px solid black; padding:3px;">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Favorit Color</th>
<th>Favorit Food</th>
<th>Favorite Season</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons" ng-click="updatePerson(person)">
<td data-toggle="modal" data-target="#editModal">{{person.firstName}}</td>
<td>{{person.lastName}}</td>
<td>{{person.favoriteColor}}</td>
<td>{{person.favoriteFood}}</td>
<td>{{person.favoriteSeason}}</td>
<td>
<button popover-template="dynamicPopover.templateUrl" popover-placement="left" popover-title="Edit" ng-click="current.person=person">Edit</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="color:#513011;">×</span>
</button>
<h4 class="modal-title" id="editModalLabel">Edit Person</h4>
</div>
<!--/HEADER-->
<div class="modal-body">
<form ng-submit="update(current.person)">
<div class="form-group">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" ng-model=current.person.firstName class="form-control" required>
</div>
<div class="form-group">
<label for="lastname">Last Name:</label>
<input name="lastname" type="text" ng-model=current.person.lastName class="form-control" required>
</div>
<div class="form-group">
<label for="favoritecolor">Favorite Color:</label>
<input name="favoritecolor" type="text" ng-model=current.perosn.favoriteColor class="form-control">
</div>
<div class="form-group">
<label for="favoritefood">Favorite Food:</label>
<input name="favoritefood" type="text" ng-model=current.perosn.favoriteFood class="form-control">
</div>
<div class="form-group">
<label for="favoriteseason">Favorite Season:</label>
<input name="favoriteseason" type="text" ng-model=current.perosn.favoriteSeason class="form-control">
</div>
</form>
</div>
<!--/MODAL-BODY-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" ng-click="update(current.person)" class="btn btn-primary" value="Save" />
</div>
<!--/MODAL-FOOTER-->
</div>
<!--/MODAL-CONTENT-->
</div>
<!--/MODAL-DIALOG-->
</div>
<!--/MODAL-->
</div>
<!--/CONTROLLER-->
</body>
</html>
<!-- script for edit popover-->
<script type="text/ng-template" id="popoverTemplate.html">
<div>
<form ng-submit="update(current.person)">
<div class="form-group">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" ng-model=current.person.firstName class="form-control">
</div>
<div class="form-group">
<label for="lastname">LastName:</label>
<input name="lastname" type="text" ng-model=current.person.lastName class="form-control">
</div>
<div class="form-group">
<label for="favoritecolor">Favorite Color:</label>
<input name="favoritecolor" type="text" ng-model=current.person.favoritecolor class="form-control">
</div>
<div class="form-group">
<label for="favoritefood">Favorite Food:</label>
<input name="favoritefood" type="text" ng-model=current.person.favoritecolor class="form-control">
</div>
<div class="form-group">
<label for="favoriteseason">Favorite Season:</label>
<input name="favoriteseason" type="text" ng-model=current.person.favoritecolor class="form-control">
</div>
<input type="submit" class="btn btn-default" value="Submit">
<input type="button" class="btn btn-default pull-right" ng-click="delete(current.schoolTerm)" value="Delete">
</form>
</div>
</script>
<script>
var person = angular.module('person', []);
personApp.controller('PersonCtrl', [
function ($scope) {
var person = [
{
'firstName': 'Christine',
'lastName': 'Smith',
'favoriteColor': 'Pink',
'favoriteFood': 'Sushi',
'favoriteSeason': 'Summer'
},
{
'firstName': 'Dana',
'lastName': 'Carvey',
'favoriteColor': 'Yellow',
'favoriteFood': 'Tomatoes',
'favoriteSeason': 'Summer'
},
{
'firstName': 'Terry',
'lastName': 'Gross',
'favoriteColor': 'Chartreuse',
'favoriteFood': 'Lasagna',
'favoriteSeason': 'Spring'
}
];
}]);
</script>
答案 0 :(得分：0)
如果你想在twitter bootstrap中使用模态并来回传递数据，你必须使用自己的指令扩展/包装它，我不建议这样做，因为已经有指令只做这一点。
如果您是Angular的新手，并且必须使用bootstrap，请考虑使用Angular Ui Bootstrap，这是一组使用twitter bootstrap编写的自定义指令。
如果您不支持IE8并且没有致力于Twitter bootstrap，我强烈建议您结帐lumx。
注意：这两个版本都处于测试阶段，因此请谨慎使用。
好的，现在让我们回到你的问题。如果您决定继续使用twitter bootstrap并且一旦安装了角度ui引导程序 - 这很简单，只需按照以下步骤进行https://github.com/angular-ui/bootstrap#installation - ，一开始可能会有点混乱的唯一方法就是如何通过从调用者控制器到模态的范围属性。 简而言之，你必须在调用者控制器中做这样的事情：
var modalInstance = $modal.open({
templateUrl: 'yourModalTemplate.html',
controller: 'yourModalController',
resolve: {
itemsFromCallerController: function () {
return [{ i: 1, i: 2 }];
}
}
你的模态控制器应该是这样的：
angular.module("app").controller('yourModalInstanceController', function ($scope, $modalInstance, itemsFromCallerController, action) {
$scope.modalHeader = "your modal header";
$scope.items = itemsFromCallerController;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
看看这个Plunker