javascript angularjs documentation - Angular - Watch for ngShow/ngHide Changes in Ancestors that Affect Child DOM Element's Visibility

2 Answers

The best way I found:

link: function (scope, element, attr) {
    attr.$observe('ngShow', function (expr) {
        scope.$watch(function () {
            return $parse(expr)(scope);
        }, function (value) {

Good Luck!

examples tutorial pdf

I am a DOM element (bound to, say, a table). I am the downstream child of an ngShow-based tabs control. I live on the second tab. When the page is rendered, I exist but I am not really visible yet.

I would like to somehow be notified when I become visible through my not-immediate parent, when its ngShow expression becomes true.

Is this possible? I would like to avoid adding code anywhere outside myself - for example, I'd rather not add code in a tab-changed event somewhere. I'd rather have a way to register to find out when, via changes in outermost containers that are bound via ngShow/ngHide, my visibility changes. Can this be done?

I did this with a directive:


<test-directive ng-show="showMe" show-model="showMe"></test-directive>


app.directive('testDirective', function() {
    return {
        restrict: 'E',
        scope: {
            showModel: "=?",
        controller: function($scope) {
            if (angular.isDefined($scope.showModel)) {
                $scope.$watch('showModel', function(newValue, oldValue) {
                    // Do stuff

So the idea is to put a $watch on the same variable linked to ng-show.