42

I want to show a lightbox with the content being revealed by ng-show, but I don't know how to trigger the lightbox JS. I'm looking for something like

ng-on-show="showLightbox()"
Iharob Al Asimi
  • 52,653
  • 6
  • 59
  • 97
Joren
  • 9,623
  • 19
  • 63
  • 104

3 Answers3

34

I think, it would be better to $watch your model, on which ng-show is bound.

Here is example: 

<div ng-app="myApp" ng-controller="myCtrl" ng-init="isDisplayed = true">
    <div ng-show="isDisplayed">something</div>
    <button ng-click="isDisplayed = !isDisplayed">Toggle</button>
</div>

var myApp = angular.module('myApp', [])
.controller('myCtrl', function($scope, $log) {
    $scope.$watch('isDisplayed', function(newValue, oldValue) {
        if (newValue !== oldValue) {
            $log.log('Changed!');
        }
    });
});

and fiddle

Andrew Shustariov
  • 2,530
  • 1
  • 17
  • 17
  • MBielski has the more correct answer. Use a boolean, not a $watch (in this case) – mortsahl Jul 28 '14 at 15:52
  • 1
    Andrey Shustariov's suggested approach is needed in a nested controller situation when you need to call a function on the inner controller when ng-show occurs on the outer controller's scope. In this situation, MBielski's approach doesn't work, because the outer controller isn't aware of the inner controller's scope and function. – dave_k_smith Jan 28 '15 at 15:14
  • Using the "Controller as" syntax will solve the nested controller issue, and this is still not the best use for a $watch. – MBielski Jun 11 '16 at 16:36
24

what about a simpler approach?

let's say you have an element like this:

<div ng-show="someBooleanValue"></div>

If you use an AND operator after displayMyDiv and put a callback there, the callback would be only executed if the first value is TRUE ( that's how the logical AND operator works ). So this is what I tried with angular 1.15.10 and it works:

$scope.showLightbox = function() {
  // your logic goes here
  return true;
}

<div ng-show="someBooleanValue && showLightbox()"></div>

If and only if someBooleanValue is true, then $scope.showLightbox() will be evaluated also. So you will have to make $scope.showLightbox() to return TRUE, else your div won't be visible.

This way is not only simpler, it also handles the observer implementation to angular ( less code to maintain ), and the callback return will be evaluated only if someBooleanValue changes to TRUE.

Guillermo Maschwitz
  • 1,066
  • 10
  • 16
15

Well, ng-show takes a Boolean value, so your best option for using it is to call your showLightbox function somewhere in the logic that sets ng-show.

$scope.reasonToShow = false;

$scope.showSomething = function(myCondition){
    if(myCondition){
        showLightbox();
        $scope.reasonToShow = true;
    }
};

<div ng-show='reasonToShow'></div>

You could do something similar with a $watch if you needed to.

MBielski
  • 6,628
  • 3
  • 32
  • 43
  • 6
    What is you are trying to set focus on an element inside the element that is being shown by ng-show? – Trevor Feb 01 '16 at 22:43