javascript - Angular.JS: views sharing same controller, model data resets when changing view

Question

I'm getting started with Angular.JS.

I have a number of views that share the same controller. Each view is a step in collecting data that is stored in the controller:

$routeProvider.when('/', {
  templateUrl: 'partials/text.html',
  controller: 'itemSubmitter'
});

$routeProvider.when('/nextThing', {
  templateUrl: 'partials/nextthing.html',
  controller: 'itemSubmitter'
});

The itemSubmitter controller:

$scope.newitem = {
  text: null
}

Here's the first view:

<textarea ng-model="newitem.text" placeholder="Enter some text"></textarea>

<p>Your text is:
{{ newitem.text }}</p>

This works, live updating the 'Your text is:' paragraph.

However when the next view is loaded, {{ newitem.text }} is reset to its default value. How can I make values stored in a controller instance persist across views?

Answer 1

Controllers are disposed when changing routes. This is good behavior since you should not rely on controllers to carry data between views. It's best to create a service to handle that data.

See the angular docs on how to use controllers correctly. http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

To quote from the docs:

Using Controllers Correctly

In general, a controller shouldn't try to do too much. It should contain only the business logic needed for a single view.

The most common way to keep controllers slim is by encapsulating work that doesn't belong to controllers into services and then using these services in controllers via dependency injection. This is discussed in the Dependency Injection Services sections of this guide.

Do not use controllers for:

• Any kind of DOM manipulation — Controllers should contain only business logic. DOM manipulation—the presentation logic of an application—is well known for being hard to test. Putting any presentation logic into controllers significantly affects testability of the business logic. Angular offers databinding for automatic DOM manipulation. If you have to perform your own manual DOM manipulation, encapsulate the presentation logic in directives.
• Input formatting — Use angular form controls instead.
• Output filtering — Use angular filters instead.
• To run stateless or stateful code shared across controllers — Use angular services instead.
• To instantiate or manage the life-cycle of other components (for example, to create service instances).