Displaying scope variable before view tag with Angular

Question

I'm using Angular with the Ionic framework to build an app. I want to display the title of the previous screen in the header bar, next to the back button. Like so:

[ '<| title of previous screen'          'Title of current screen']

My thinking is to set a scope variable per view that I can then display in my title bar code.

I'm using this as index.html:

  <body ng-app="MyApp">

      <!-- The nav bar that will be updated as we navigate -->
      <nav-bar animation="nav-title-slide-ios7" 
           type="bar-positive" 
           back-button-type="button-icon" 
           back-button-icon="icon icon-back"
           back-button-label="{{backButtonLabel}}"
           ></nav-bar>

      <!-- where the content of each page will be rendered -->
     <nav-view animation="slide-left-right" back-button-label="{{backButtonLabel}}"></nav-view>

  </body>

The problem is, the scope variable is only available within the context of nav-view, but not in nav-bar. So the variable doesn't update. When you replace back-button-label with something static like 'HOME' or something, it does work.

Any idea how I can display the title of the previous screen in the title bar?

I've set up this Plunkr to demonstrate: http://plnkr.co/edit/BWsCQ98GAdw0I00pvCCk

user2445933 · Accepted Answer · 2014-01-14 12:31:43Z

1

You may add common parent scope to nav-bar and nav-view and declare your variable in it (using ng-init, or, better, separate controller for this parent) or just declare your variable on $rootScope.

answered Jan 14, 2014 at 12:31

user2445933

Sign up to request clarification or add additional context in comments.

1 Comment

Squrler Over a year ago

Went for defining a separate controller on body. That made sure nav-bar could see any scope variables that were defined there.

Joe Naber · Accepted Answer · 2014-02-28 13:58:04Z

0

another option would be to use broadcast or emit with some type of history service. check this out: http://motionharvest.com/2013/03/21/passing-arugments-to-on-in-angularjs-from-emit-and-broadcast/

answered Feb 28, 2014 at 13:58

Joe Naber

5375 silver badges9 bronze badges

Collectives™ on Stack Overflow

Displaying scope variable before view tag with Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related