Changing ng-hide styling depending on element?

Question

Right now, I have a page where I'm using ng-show and ng-hide on different elements. On some of the elements I need visibility: hidden!important; so that it will still take space on the page. On other elements, I need them to disappear completely with display: none!important; .

Is there a way I can have different attributes for them?

Answer 1

You could try using ng-style instead of ng-show/ng-hide and conditionally apply classes to the elements. https://docs.angularjs.org/api/ng/directive/ngStyle

Answer 2

You want to create this kind of directive:

.directive('ngVisible', function () {
    return function (scope, element, attr) {
        scope.$watch(attr.ngVisible, function (visible) {
            element.css('visibility', visible ? 'visible!important' : 'hidden!important');
        });
    };
})

You will choose between ng-visible and ng-show / ng-hide , regarding your use case.