【问题标题】:Angular.JS: views sharing same controller, model data resets when changing viewAngular.JS:共享同一控制器的视图,更改视图时模型数据重置
【发布时间】:2013-04-19 02:46:40
【问题描述】:

我开始使用 Angular.JS。

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

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

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

itemSubmitter 控制器:

$scope.newitem = {
  text: null
}

这是第一个视图:

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

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

这有效,实时更新“您的文本是:”段落。

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

【问题讨论】:

  • 你能分享到 ng-controller 属性的代码吗?
  • @plus 我已经添加了 app.js 和控制器。但是,我目前没有在我的代码中的任何地方使用 ng-controller。我的理解是 app.js 路由将每个视图绑定到控制器。我应该使用 ng-controller 吗?
  • 如果您需要跨视图保留数据,您可以将$rootScope 注入您的控制器并将其存储在那里。

标签: javascript angularjs


【解决方案1】:

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

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

引用文档:

正确使用控制器

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

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

不要将控制器用于:

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

【讨论】:

  • 感谢@BArt,这正是我需要知道的。
  • 这很有趣,这是公认的方法。我并不是要讨论理论和模式,但似乎每个视图一个控制器更像是 MVVM 模式而不是传统的 MVC 模式
  • @PW 该模式实际上与它几乎没有关系。控制器根本不应该负责跨视图保持/共享状态。
  • 根据您引用的文档,角度声明每个视图应该有一个控制器,这与许多典型的 MVC 类型方法(例如 ASP.NET MVC)背道而驰
  • Angular 并不是真的想成为 MVC – stackoverflow.com/questions/13329485/mvw-what-does-it-stand-for
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-06
  • 2010-10-23
  • 2023-03-13
  • 1970-01-01
  • 2015-02-06
相关资源
最近更新 更多