Angular.JS:视图共享同一个控制器，更改视图时模型数据重置 [英] Angular.JS: views sharing same controller, model data resets when changing view

问题描述

我正在开始使用 Angular.JS.

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'
});

itemSubmitter 控制器:

The itemSubmitter controller:

$scope.newitem = {
  text: null
}

这是第一个视图:

<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.

然而，当加载下一个视图时，{{ newitem.text }} 被重置为其默认值.如何使存储在控制器实例中的值跨视图保持不变?

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?

推荐答案

控制器在改变路由时被释放.这是一种很好的行为，因为您不应该依赖控制器在视图之间传输数据.最好创建一个服务来处理这些数据.

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.

请参阅有关如何正确使用控制器的 angular 文档.http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

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

引用文档:

一般来说，控制器不应该尝试做太多事情.它应该只包含单个视图所需的业务逻辑.

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.

请勿将控制器用于:

• 任何类型的 DOM 操作——控制器应该只包含业务逻辑.DOM 操作(应用程序的表示逻辑)以难以测试而著称.将任何表示逻辑放入控制器会显着影响业务逻辑的可测试性.Angular 为自动 DOM 操作提供数据绑定.如果您必须执行自己的手动 DOM 操作，请将表示逻辑封装在指令中.
• 输入格式——改用有角度的表单控件.
• 输出过滤——改用角度过滤器.
• 要运行跨控制器共享的无状态或有状态代码 - 请改用 Angular 服务.
• 实例化或管理其他组件的生命周期(例如，创建服务实例).

这篇关于Angular.JS:视图共享同一个控制器，更改视图时模型数据重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！