Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Angular.JS:视图共享同一控制器,更改视图时重置模型数据_Javascript_Angularjs - Fatal编程技术网

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

Javascript Angular.JS:视图共享同一控制器,更改视图时重置模型数据,javascript,angularjs,Javascript,Angularjs,我将开始使用Angular.JS 我有许多视图共享同一个控制器。每个视图都是收集存储在控制器中的数据的一个步骤: $routeProvider.when('/', { templateUrl: 'partials/text.html', controller: 'itemSubmitter' }); $routeProvider.when('/nextThing', { templateUrl: 'partials/nextthing.html', controller: 'i

我将开始使用Angular.JS

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

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

$routeProvider.when('/nextThing', {
  templateUrl: 'partials/nextthing.html',
  controller: 'itemSubmitter'
});
$scope.newitem = {
  text: null
}
itemSubmitter控制器:

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

$routeProvider.when('/nextThing', {
  templateUrl: 'partials/nextthing.html',
  controller: 'itemSubmitter'
});
$scope.newitem = {
  text: null
}
以下是第一个视图:

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

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

你的文字是:
{{newitem.text}

这是可行的,实时更新“你的文字是:”段落


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

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

请参阅有关如何正确使用控制器的角度文档。

引用文件:

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

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

不要将控制器用于:

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

你能将代码共享到ng控制器属性吗?@另外,我添加了app.js和控制器。但是,我目前没有在代码中的任何地方使用ng控制器。我的理解是app.js路由将每个视图绑定到控制器。我应该使用ng controller吗?如果您需要数据在视图之间持久化,您可以将
$rootScope
注入控制器并保存在那里。谢谢@BArt,这正是我需要知道的。这是一种公认的方法,这很有趣。我并不想讨论理论和模式,但似乎每个视图一个控制器更像是MVVM模式,而不是传统的MVC模式pattern@PW这种模式实际上与它没有什么关系。控制器不应承担在视图之间保持/共享状态的责任。根据您引用的文档,每个视图应该有一个控制器,这与许多典型的MVC类型方法(如ASP.NET)背道而驰。MVCAngular并没有真正尝试成为MVC——