bootstrap modal example

by Aswin Devarajan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/js/ngDialog.js"></script>
<script type="text/ng-template" id="templateId">
  <div class="ngdialog-message">
    <h3>Do you want to remove this ?</h3>
    <p>All data will be lost.</p>
    <input type='text' ng-model='formInput'>
  </div>
  <div class="ngdialog-buttons">
    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(formInput)">Confirm</button>
    <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">Cancel</button>
  </div>
</script>


<button ng-click='openConfirmButton()'>Click</button>

CSS

.ngdialog.dialogwidth800 .ngdialog-content{width : 800px;}

JavaScript

var app = angular.module('myApp', ['ngDialog'])
app.controller('mainCtrl', ['$scope', 'ngDialog', function($scope, ngDialog) {
  console.log('viva')

  $scope.openConfirmButton = function() {
    console.log('viva clicked');
    ngDialog.openConfirm({
      template: 'templateId',
      className: 'ngdialog-theme-default dialogwidth800',
      scope: $scope
    }).then(function(resolved) {
    	console.log('in resolved')
      console.log('resolved', resolved);
    }, function(rejected) {
    	console.log('in rejected')
      console.log('rejected', rejected);
    });
  }
}]);