<!DOCTYPE html>
<html data-ng-app="test">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-controller="ctrl">
<div class="container">
<h1>Bootstrap modal dialogs with angular</h1>
<p>Click the edit button to edit the person's name in a modal dialog.</p>
<table class="table">
<tr>
<th>Name</th><th>Actions</th>
</tr>
<tr ng-repeat="person in persons">
<td>{{person.name}}</td><td><button type="button" class="btn btn-xs" ng-click="editDialog.open(person)">Edit...</button></td>
</tr>
</table>
<button type="button" ng-click="add()" class="btn">Add new person</button>
<edit-person-dialog model="editDialog"></edit-person-dialog>
</div>
</body>
</html>
var app = angular.module('test', []);
// this represents the state of the dialog: a visible flag and the person being edited
var EditPersonDialogModel = function () {
this.visible = false;
};
EditPersonDialogModel.prototype.open = function(person) {
this.person = person;
this.visible = true;
};
EditPersonDialogModel.prototype.close = function() {
this.visible = false;
};
app.controller('ctrl', ['$scope', function ($scope) {
$scope.editDialog = new EditPersonDialogModel();
$scope.persons = [{name: 'John'}, {name: 'Barbara'}];
$scope.add = function() {
$scope.persons.push({name: 'New Person'});
};
}]);
app.directive('editPersonDialog', [function() {
return {
restrict: 'E',
scope: {
model: '=',
},
link: function(scope, element, attributes) {
scope.$watch('model.visible', function(newValue) {
var modalElement = element.find('.modal');
modalElement.modal(newValue ? 'show' : 'hide');
});
element.on('shown.bs.modal', function() {
scope.$apply(function() {
scope.model.visible = true;
});
});
element.on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.model.visible = false;
});
});
},
templateUrl: 'edit-person-dialog.html',
};
}]);
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Edit Person</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name:</label>
<input ng-model="model.person.name" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>