使用$模式:
示例HTML:
<div>
<div class="modal-header">
<h3 class="modal-title">{{data.title}}</h3>
</div>
<div class="modal-body">
{{data.message}}
</div>
<div class="modal-footer">
<button class="btn-primary" ng-click="ok()">Ok</button>
</div>
</div>
例JS:
var MyModalCtrl = function ($scope, $modal) {
$scope.title = 'I'm a Modal';
$scope.message = 'Hello World';
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: '/path/to/html',
controller: MyModalInstanceCtrl,
size: 'lg',
resolve: {
data: function() {
return {title: $scope.title, message: $scope.message};
}
}
});
modalInstance.result.then(function (selectedItem) {
console.log('Closed');
});
};
var MyModalInstanceCtrl = function ($scope, $modalInstance, data) {
$scope.data = data;
$scope.ok = function() {
$modalInstance.close();
};
};
此文檔可以在這裏找到:http://angular-ui.github.io/bootstrap/
它在很好描述在模態指令的章節中的[documentation](http://angular-ui.github.io/bootstrap/)。 – Gamb