Angular.JS:共享相同控制器的视图,更改视图时模型数据重置

mik*_*ana 36 javascript angularjs

我开始使用Angular.JS了.

我有许多共享相同控制器的视图.每个视图都是收集存储在控制器中的数据的一个步骤:

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

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

itemSubmitter控制器:

$scope.newitem = {
  text: null
}
Run Code Online (Sandbox Code Playgroud)

这是第一个观点:

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

<p>Your text is:
{{ newitem.text }}</p>
Run Code Online (Sandbox Code Playgroud)

这是有效的,实时更新'你的文字是:'段落.

但是,加载下一个视图时,{{ newitem.text }}将重置为其默认值.如何使存储在控制器实例中的值在视图中保持不变?

Bar*_*art 68

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

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

引用文档:

正确使用控制器

通常,控制器不应该尝试做太多.它应该只包含单个视图所需的业务逻辑.

保持控制器苗条的最常用方法是将不属于控制器的工作封装到服务中,然后通过依赖注入在控制器中使用这些服务.本指南的依赖注入服务部分对此进行了讨论.

不要使用控制器:

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

  • 根据您引用的文档角度指出每个视图应该有一个控制器,这与许多典型的MVC类型方法(如ASP.NET MVC)相悖 (2认同)