Can't see 'Todo' title within app?

meta
1

Hey guys,

Just testing the framework and running through the guide - for some reason on the iOS simulator I cannot see the ‘Todo’ title?

Is there a dependancy I am missing or is it just not calling something in?

My current screen:

Thanks,

Jonathan

2

in the new version you have to youse the curly brackets like so: title="{{headerTitle}}" and then in the controller you can set the headerTitle: $scope.headerTitle = ‘Header’;

3

@hillbm Hmm so the guide is out of date?

Currently I’m using

<body ng-app="todo">

<ion-side-menus>

    <!-- Center content -->
    <ion-pane ion-side-menu-content>
      <ion-header-bar class="bar bar-header bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content has-header="true">
      </ion-content>
    </ion-pane>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar bar-header bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>

  </ion-side-menus>
4

yes. i load my template in a ui-view like so:

<ion-view title="{{headerTitle}}" left-buttons="leftButtons" right-buttons="rightButtons"><ion-content has-header="true">BLA</ion-content></ion-view>

and then i change it in the controller which works fine

5

What version of Ionic are you using? Did you run from a seed project or download the Ionic files yourself?

6

I’m having the same issue as Papasmurfo, using version: 0.9.27 (salamander). I followed the instructions from http://ionicframework.com/docs/guide/installation.html and downloaded the files myself.

7

Fixed this - you need to actually assign a title

.controller('Weezle', function($scope) {
  $scope.myTitle = 'Title Here!';
8

Since this is suppose to be the “hello world” beginner application, could someone please print out the full text for a working solution, so it can be “cut and paste” into place

Thanks,

9

We are updating this right now - expect it working within the next days.

10 
.controller('MyAppName', function($scope) {
  $scope.myTitle = 'Hello World';
});

Or - With a Application Logo

.controller('MyAppName', function($scope) {
  $scope.myTitle = '<img src="myfancylogo.png"/>';
});
11

It is working now. The guide has been updated to use <div class="bar bar-header bar-dark">...</div> instead of <ion-header-bar class="bar bar-header bar-dark">...</ion-header-bar>

The new code looks like this:

<!-- Center content -->
<ion-pane ion-side-menu-content>
  <div class="bar bar-header bar-dark">
    <h1 class="title">Todo</h1>
  </div>
  <ion-content has-header="true">
  </ion-content>
</ion-pane>

But what’s the difference between a regular <div class="bar bar-header"> and a directive ion-header-bar? When would we favour one over another?

12

There really is no difference and there is a huge difference. LOL.

<ion-header-bar> is a custom Ionic AngularJS directive When you put it in your HTML, AngularJS automatically parses and compiles a template that is predefined for that directive.

This is the HTML that directive generates automatically:

'<header class="bar bar-header" ng-transclude></header>' :

When you define it yourself with classes, you are basically doing the directive’s work for the app. However, some directives have other functionality that may not get inherited by just using the classes. So, generally it is best to use the directives.