我有一个简单的模态显示在页面顶部，我似乎无法使用angularjs做正确的事。我使用chrome插件作为角度调试器，但现在它已经忘记了我的范围。请帮助我重新获得我的范围，或者更好的是如何使用angular-ui-bootstrap模块中的modal。
var app = angular.module('classDetails', ['ui.bootstrap'])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}])
.controller('ClassDetailsController', ['$scope', '$modal', '$http',
function($scope, $modal, $http) {
$scope.username = 'Bob';
$scope.board = {name: "Welding", id: 1};
$scope.categories = [{name: "Tests", id: 123, weight: 13}]
$scope.openModal = function(category) {
$modal.open({
animation: false,
templateUrl: 'modal-template.html',
controller: 'ModalControl',
resolve: {
category: category
}
}).result.then(function (category) {
//post changes
},
function () {/*dismiss no-op*/}
);
};
}])
.controller('ModalControl', ['$scope', '$modalInstance',
function(scope, $modalInstance, category) {
scope.ok = function () {
$modalInstance.close(category);
};
scope.cancel = function () {
$modalInstance.cancel();
}
}]);
<html ng-app="classDetails">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/animate.css" media="screen" rel="stylesheet">
<script type="text/javascript" src="/static/js/utils.js"></script>
</head>
<body>
<div ng-controller="ClassDetailsController" class="row">
<div class="col-sm-10">
<h1>
{{ board.name }}
<small style="font-size:16px;">
<a href="/#">Edit</a>
</small>
</h1>
</div>
<div class="col-sm-2">
<a href="#"
class="btn btn-block btn-success" style="margin-top: 30px;">Manage Grades</a>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<h3>
Categories
<small style="font-size:12px;">
<a ng-click="openModal(null)"
id="add-category">Create New</a>
</small>
</h3>
<table class="table" id="categoryTable">
<thead>
<tr>
<th class="col-sm-5">Name</th>
<th class="col-sm-3">Weight</th>
<th class="col-sm-2">Edit</th>
<th class="col-sm-2">Details</th>
</tr>
</thead>
<tbody id="categories-table">
<tr ng-repeat="category in categories" class="category-row" id="{{ category.id }}_row">
<td class="category-name">{{ category.name }}</td>
<td class="category-weight">{{ category.weight }}</td>
<td class="category-edit">
<a class="btn btn-primary btn-block btn-xs"
ng-click="openModal(category)">
Edit
</a>
</td>
<td><a href="#"
class="btn btn-success btn-block btn-xs">Details</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/static/js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script src="class_details.js"></script>
</body>
</html>
对于多余的HTML感到抱歉，但我现在很丢失。我向你保证modal-template.html。澄清;我所看到的是使用“{{”和“}}”呈现所有绑定变量的页面，但是batarang看到页面上没有活动范围。这只是我尝试重新创建我在应用程序中遇到问题的页面，而我遇到的问题似乎与我的应用程序中的问题不同。在真实的程序中，模态开始打开，即使我在animation: false函数中说$modal.open，但尝试应用modalAnimation指令that error message（或类似的东西）以及隔离范围。
也许这里有一些版本问题？ 编辑：AngularJS版本1.2.26