Render plaintext using Angular route, ui-view

Question

I am using Angular 1.3, creating views using ui-router and ui-view. I have added the ui-view on index.html file, which has Menu, footer and in the middle ui-view for main content.

I have created whole application using states with $stateProvider.state('state_name')

Now I want to create a page with plain text, no html tags, just plaintext. But the problem is when I create route for that, it includes header and footer, which is correct behavior of Angular. But how can I create a view with no menu, footer included, just plain text which I will add in view file, with route. Any solution?

One possible solution would be to add a service that can change a variable set for ng-hide on the header and the footer. see the first answer for [this](http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view) question. — nipuna-g, Dec 04 '15 at 13:31
Yeah probably, I have to hide/remove those elements. Or like using onEnter callback of .state method. — Rahul Sagore, Dec 04 '15 at 13:36
Yes, that's the idea. I'll post the answer with a small example. — nipuna-g, Dec 04 '15 at 13:38

score 1 · Accepted Answer · edited May 23 '17 at 12:15

You can have a service that changes is bond to the main controller. The first answer to this question explains how this can be achived.

I've made a modified Plnkr example for your specific use case here

app.factory('Page', function(){
  var visible = true; 
  return {
    visible: function() { return visible; },
    setVisible: function(state) { visible = state}
  };
});

The factory called Page provides access to a visible variable for both the main controllers and the controllers inside the ng-views.

The aim is to change this visible variable in the controller in order to change the visibility of the main components outside of the ng-view.

function MainCtrl($scope, Page) {
  $scope.Page = Page;
}

To this end we have a binding in the main controller that can access the page service.

<html ng-app="myApp" ng-controller="MainCtrl">
<body>
<h1 ng-hide="Page.visible()">Page Header</h1>
<ul>
  <li><a href="test1">test1</a>
  <li><a href="test2">test2</a>
</ul>
</html>

And in the html, we define that the ng-if is controlled by this visible variable in the MainContorllers Page.

function Test1Ctrl($scope, Page) {
  Page.setVisible(false);
}

Finally, we can call the change visibility function from the other views in order to change the visibility of the headers and footers in the Main View.

Yeah I did with jquery, but your solution is more general. Thanks. — Rahul Sagore, Dec 05 '15 at 06:43

Render plaintext using Angular route, ui-view

1 Answers1