Define a custom controller for the lightbox

[fernandojsg]

I've took your starting example and tried to achive the following: Modify the lightbox.html to include a button to perform a custom action in the main controller.

So far I've done the following:

angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
  $scope.images = [....];

  $scope.openLightboxModal = function (index) {
    Lightbox.openModal($scope.images, index);
  };

  $scope.myNewFunction = function (image) {
    // Do something with image
 }
});

And the part of the modified lightbox.html including the button is:

<button type="button" btn-click="myNewFunction(Lightbox.image)" class="btn btn-danger">Do something</button>

But as fas as I understand, it's not possible to pass a controller to the lightbox, is it right? Is there any way to achieve it with the current implementation?

[skirjak]

workaround with decorator

function LightboxController($scope) {
    // own stuff
};
LightboxController.$inject = ['$scope'];

module.config(['$provide', function ($provide) {
    $provide.decorator('lightboxSrcDirective', function ($delegate) {
        var directive = $delegate[0];
        directive.controller = LightboxController;
        return $delegate;
    });
}]);

[compact]

You can also add your own controller to the lightbox itself. In lightbox.html:

<div class="modal-body"
    ng-swipe-left="Lightbox.nextImage()"
    ng-swipe-right="Lightbox.prevImage()"
    ng-controller="LightboxCtrl">

  ...

  <button type="button"
      btn-click="LightboxCtrl.myNewFunction(Lightbox.image)"
      class="btn btn-danger">Do something</button>

  ...

</div>

And write the controller separately:

angular.module('app').controller('LightboxCtrl', function () {
  $scope.myNewFunction = function (image) {
    // Do something with image
  };
});

I'll add a real example/demo to the docs.

[compact]

See here: http://compact.github.io/angular-bootstrap-lightbox/demo3/index.html

[fernandojsg]

Perfect! Thank you very much