Angular.JS: exibições compartilhando o mesmo controlador, os dados do modelo são redefinidos ao alterar a visualização

Estou começando com o Angular.JS.

Eu tenho um número de visualizações que compartilham o mesmo controlador. Cada visualização é uma etapa na coleta de dados que é armazenada no controlador:

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

O controlador itemSubmitter:

 $scope.newitem = { text: null } 

Aqui está a primeira vista:

  

Your text is: {{ newitem.text }}

Isso funciona, atualizando ao vivo o parágrafo “Seu texto é:”.

No entanto, quando a próxima exibição é carregada, o {{ newitem.text }} é redefinido para seu valor padrão. Como posso fazer valores armazenados em uma instância do controlador persistirem em vistas?

Os controladores são descartados ao mudar de rota. Esse é um bom comportamento, pois você não deve confiar nos controladores para transportar dados entre as visualizações. É melhor criar um serviço para lidar com esses dados.

Veja os documentos angulares sobre como usar os controladores corretamente. http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

Para citar os documentos:

Usando controladores corretamente

Em geral, um controlador não deve tentar fazer muito. Ele deve conter apenas a lógica de negócios necessária para uma única visualização.

A maneira mais comum de manter os controladores mais leves é encapsulando o trabalho que não pertence aos controladores em serviços e, em seguida, usando esses serviços em controladores por meio de injeção de dependência. Isso é discutido nas seções Serviços de Injeção de Dependência deste guia.

Não use controladores para:

  • Qualquer tipo de manipulação de DOM – os controladores devem conter apenas lógica de negócios. A manipulação de DOM – a lógica de apresentação de um aplicativo – é bem conhecida por ser difícil de testar. Colocar qualquer lógica de apresentação em controladores afeta significativamente a testabilidade da lógica de negócios. Angular oferece binding de dados para manipulação automática de DOM. Se você tiver que executar sua própria manipulação DOM manual, encapsule a lógica de apresentação nas diretivas.
  • Formatação de input – use controles de formulário angular.
  • Filtragem de saída – use filtros angulares.
  • Para executar o código sem estado ou com estado compartilhado entre os controladores – use serviços angulares.
  • Instanciar ou gerenciar o ciclo de vida de outros componentes (por exemplo, para criar instâncias de serviço).