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?
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
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.
