Getting Started

Angular Slideout Panel was built to be as close to a drop-in replacement as possible for Angular Bootstrap's Modal (https://angular-ui.github.io/bootstrap/#/modal).

Take a look at the docs for the API.

Follow these steps to get started.


1) Install via Bower 

        
bower install angular-slideout-panel --save

2) Add JS and CSS 

        
<script src="bower_components/angular-slideout-panel/release/js/angular-slideout-panel.min.js"></script>

<link rel="stylesheet" href="bower_components/angular-slideout-panel/release/css/angular-slideout-panel.min.css">

3) Add Angular dependency 

        
angular.module('demoApp', [
  'angular-slideout-panel'
]);

Example

              
  <div id="demo" class="container clearfix" ng-controller="demoController">
    <div class="demo-buttons clearfix">
      <button class="btn btn-default pull-left" ng-click="openPanelLeft()">
        Open a panel on left side
      </button>

      <button class="btn btn-default pull-right" ng-click="openPanelRight()">
        Open a panel on right side
      </button>
    </div>
  </div>
              
            
              
  angular.module('demoApp', [
    'angular-slideout-panel'
  ]);

  angular.module('demoApp').controller('demoCtrl', [
    '$scope',
    'angularSlideOutPanel',
    function($scope, angularSlideOutPanel) {
      $scope.openPanelLeft = function() {
        angularSlideOutPanel.open({
          template: template,
          openOn: 'left',
          controller: [
            '$scope',
            'user',
            modalController
          ],
          resolve: {
            user: [
              function() {
                return {
                  firstName: 'Jerry'
                };
              }
            ]
          }
        });
      };

      $scope.openPanelRight = function() {
        var panelInstance2 = angularSlideOutPanel.open({
          template: template,
          openOn: 'right',
          controller: [
            '$scope',
            'user',
            modalController
          ],
          resolve: {
            user: [
              function() {
                return {
                  firstName: 'Jerry'
                };
              }
            ]
          }
        });

        panelInstance2.result
          .then(function(result) {
            console.log('panel was closed with result : ', result);
          }).catch(function(error) {
            console.log('panel was rejected with error : ', error);
          });
      };

      function modalController($scope, user) {
        $scope.closePanel = function() {
          $scope.$panelInstance.close('this is from the controller!!');
        };

        $scope.dismissPanel = function() {
          $scope.$panelInstance.dismiss('this is from the controller!!');
        };

        $scope.user = user;
      }
    }
  ]);

Docs

The angularSlideOutPanel service is used to create panels. Creating panels is straightforward: create a template and controller, and reference them when using angularSlideOutPanel.

The angularSlideOutPanel has only one method: open(options).

angularSlideOutPanel.open(options)

options parameter:

  • template (Type: string) Inline template representing the modal's content.
  • templateUrl (Type: string) A path to a template representing modal's content. You need either a template or templateUrl.
  • openOn (Type: string) Either left or right. Changes the side the panel opens on.
  • controller (Type: function|string|array, Example: MyModalController) - A controller for the modal instance, either a controller name as a string, or an inline controller function, optionally wrapped in array notation for dependency injection. Has a special $panelInstance injectable to access the panel instance.
  • resolve (Type: Object) - Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property in the router.

return

The open method returns a panel instance, an object with the following properties:
  • close(result) (Type: function) - Can be used to close a modal, passing a result.
  • dismiss(reason) (Type: function) - Can be used to dismiss a modal, passing a reason.
  • result (Type: promise) - Is resolved when a modal is closed and rejected when a modal is dismissed.
A dependency called $panelInstance can also be injected into your controller, so you can control the panel from there as well. Simply add $panelInstance as a dependency on your controller.