Conditional ui-view

Question

I have a ui-view defined in my root template <div ui-view=""></div> . Is it possible to automatically hide this view if it is empty?

I have been looking for a similar topic for some time, but all people suggest checking the current route or skipping vars on rootScope, which I don't like. I'm looking for the simplest solution - checking if the desired view has any content, and if not, hide its div (or any other html tag)

Answer 1

I would like to show or share how I can solve this. I would say that this is a similar story if I read the question carefully enough. Otherwise, take it as a hint ...

Scenario: we need a place where we can show something, if necessary. And hide it if ... not necessary. Let us call it a toolbar and suppose that it is defined as a View in the root state and is intended to control any child state / controller ....

 $stateProvider .state('myModule', { url: "/mm", // sub root 'mm' like MyModule views: { ' body@ ': { // this way we inject into index.html templateUrl: .. // the MyModule root template controller: 'RootCtrl', // the root controller }, ' toolbarView@myModule ' : { // the view is part of MyModule template templateUrl: .. controller: .. }, ... // standard defintions of the root state ... 

The bottom line here is that the view should be displayed by default. Visibility will be driven by this view:

• he should not check: is there content inside me ...
• but he should check: Is IsVisible Model set to true ?

Actually it would be very simple. In our root controller RootCtrl we can / must declare a Model for our toolbar View:

 // inside of the 'RootCtrl' $scope.ToolbarModel = { IsVisible : false, ViewUrl : null, }; $scope.ToolbarModel.close = function(){ this.ViewUrl : null; this.IsVisible = false; } 

And this could be our toolbar View:

 // toolbar class can position this view from the global perspective <div class="toolbar" ng-show="ToolbarModel.IsVisible" > // the view is managing its visiblity by Model values <button class="btn btn-default btn-xs" ng-click="ToolbarModel.close()" // anyone can anywhere hide us </button> // holder class representing some inner scrolling area... <div class="holder" ng-include="ToolbarModel.ViewUrl" > // this way we inject the passed 'ViewUrl' </div> </div> 

What is it. The included view can contain directives with controllers requiring $state , $stateParams ... and do a lot.

Good thing I see here:

• The view is defined in the root view, so we can position it from a global perspective.
• No hacking. Pure angular way
  • The view is always displayed (actually once, being part of the root state) and is immediately hidden in the case of IsVisible === false .
  • Any child at any depth can use it, including calling ToolbarModel.close()
  • One click will close() ... do not disturb if not necessary
• we are not creating any extensions here for existing angular a ui-router functions, just using what is available

Finally, to answer the question:

Is it possible to automatically hide this view if it is empty?

Yes, we can manage $scope.ToolbarModel.IsVisible .

(NOTE: if necessary, why is this model available for every child What are the nuances of prototype / prototype inheritance in AngularJS? )

Answer 2

I understand this is an old question, but there is another way to do this using CSS.

You can use: an empty selector to check the contents and hide the div.