Here is codepen example. When I click on Scientific Facts button, it is directed to the facts page.
In facts page, I have to manually type view-title="facts", so the header can show title "facts".
Is it possible to get the button text(Scientific Facts) automatically to be the view-title?
http://codepen.io/ionic/pen/odqCz
<html ng-app="ionicApp">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
<p>Dogs have four toes on their hind feet, and five on their front feet.</p>
<p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
<p>A cockroach will live nine days without it's head, before it starves to death.</p>
<p>Polar bears are left handed.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts2.html" type="text/ng-template">
<ion-view view-title="Also Factual">
<ion-content class="padding">
<p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
<p>1 in every 4 Americans has appeared on T.V.</p>
<p>11% of the world is left-handed.</p>
<p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
<p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
<p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<div class="list">
<div class="item">
@IonicFramework
</div>
<div class="item">
@DriftyTeam
</div>
</div>
</ion-content>
</ion-view>
</script>
There are two ways to achieve this:
1) The most obvious one is done with prototypal controller inheritance in angular. You need to declare a controller for the tabs state.
Within the $scope in this controller you can define the title for the button and the header as scope variable, e.x:
$scope.testTitle = 'Scientific Facts';
Now since every other controller inherits from the tabs controller, the testTitle property is also in the inherited scope and can be used to render the title.
Updated codepen: http://codepen.io/anon/pen/mJVOJJ
I would not recommend to do this this way since is hard to know which properties are defined in which controller and this will get very messy with the time.
2) You can declare a service and define the title property there. Than you can inject the service into controller to get the title property.
In this way you keep the $scope clean:
.factory('TitleService', function() {
var titles = {
t1:'foobar',
t3:'baz',
t4:'bar'
};
return titles;
});
Codepen: http://codepen.io/anon/pen/xGZRZM
I'm not quite sure the motivation behind this request, but one possible way to solve it would be to add the desired title into the URL of the anchor that redirects to your "facts" page, i.e.:
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts?title=Scientific%20Facts">Scientific Facts</a>
If you alter your route to the page to be aware of that query param, you could use the $stateParams service within that page's controller to retrieve that value, i.e.:
.state('tabs.facts', {
url: "/facts?:title",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
Notice the url "/facts?:title" - the ":title" now becomes a parameter that will be picked up by the $stateParam service. Now within your controller you could just do this:
.controller('FactController', function ($scope, $stateParams) {
$scope.title = $stateParams.title;
});
Now you can reference that title right from your Facts view via {{title}}.
Here is an updated pen that shows this working. http://codepen.io/anon/pen/OVMbVX
Seems like a lot of effort though, just to pass around the title ;-)
A better approach could be to create a "page names" service, which has all your page names in one place, and then grab that services from both controllers; on the home controller you could use the page name to setup the anchor text, and on the other page use it to setup the page title. Lots of ways to skin this cat.