1

I just wanted to ask about nesting views in one state and how to share some context between those views.

I just have such index.html

<body ng-app="app">
  <div ui-view="header"></div>
  <div ui-view="content"></div>
  <div ui-view="footer"></div>
</body>

And I have a header.html that is rendered inside ui-view named header like this:

<h1>{{title}}</h1>

This is very simple template but it shows the problem that I have. When ui-view named content component is rendered It depends on route (state). The header and footer are defined in abstract parent root state so I don't need to repeat them in child states. Child states only define content for parent root state (index.html).

How to control for example title scope variable in header.html from child state so I can easy switch title in this header view based on state. Every example that I saw in internet assumes that there is static header and footer template without any variables.

I'm using angularjs and ui.router. Does ui.router define for each view in single state new context?

Marcin Kapusta
  • 5,076
  • 3
  • 38
  • 55

1 Answers1

1

What you are looking for are services. They are basically objects that hold the states for the application outside of controllers (so you could use them to share data between two controllers for example).

There's also a $rootScope object that you could utilize (its a single scope available to every controller that injects it), but i'd recommend this less than first approach (especially for the future mainterance reasons - if you ever want to upgrade to angular, it doesn't have the rootScope).

vicbyte
  • 3,690
  • 1
  • 11
  • 20
  • See [`$rootScope` exists, but it can be used for evil](https://docs.angularjs.org/misc/faq#-rootscope-exists-but-it-can-be-used-for-evil). – georgeawg May 12 '19 at 06:57