angular ui.bootstrap modal

by Kai_Draord

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="MyCtrl">
    <script type="text/ng-template" id="dialog.html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <p>header</p>
                </div>
                <div class="modal-body">
                    <p>One fine: <input type="text" ng-model="email" /></p>
                </div>
                <div class = "modal-footer">
                    <p>footer</p>
                    <button class="btn btn-primary" ng-click="ok()">ok</button >
                </div>
            </div>
        </div>
    </script>
    <button class="btn btn-primary" ng-click="openDialog()">open</button>
    <p>provided: {{email}}</p>
</div>

JavaScript

class PageLayout {
  open() {
    $modal.open({
      templateUrl: 'dialog.html',
      resolve: {
        email: function() {
          return $scope.email;
        }
      },
      controller: function($scope, $modalInstance, email) {
        $scope.email = email;
        $scope.ok = function() {
          $modalInstance.close({
            email: this.email,
            oldEmail: $scope.email
          });
        };
      }
    }).result.then(function(p) {
      console.dir(p);
      $scope.email = p.email;
    });
  }
}


angular.module('myApp', ['ui.bootstrap'])
  .service('MyService', PageLayout).controller('MyCtrl', function($scope, PageLayout) {
  $scope.email = 'initial';

  $scope.openDialog = function() {
		MyService().open();
    
  };
});