Angular：为什么不在同一个控制器的视图之外更新模型？答案

【问题标题】：Angular: Why Won't Model Update Outside Of View In Same Controller?Angular：为什么不在同一个控制器的视图之外更新模型？
【发布时间】：2016-03-10 14:50:47
【问题描述】：

我发现许多帖子谈论模型/视图未更新，但我仍然无法弄清楚这一点。我是 Angular 的新手，顺便说一句，所以我怀疑这是菜鸟问题。

我有以下 Angular 应用程序。

编辑文本输入test_var 时，编辑后的值不会在侧边栏中更新，而是在视图中。为什么以及如何解决？

这在我不使用视图和路线时有效。

我尝试了侧边栏控制器，但没有区别。我试过$rootScope，它部分工作（它破坏了其他功能），但我不想使用全局范围。

感谢观看。

HTML

<body>

	<div ng-app="rxApp" ng-controller="WizardCtrl">
		
		<div class="ng-view">
		</div>

		<div class="sidebar">
			<span ng-bind="test_var"></span>
		</div>

	</div>

</body>

查看（One.html）

<input ng-model="test_var" />
	
<span ng-bind="test_var"></span>

控制器

rxApp.controller( 'WizardCtrl', function ( $scope, $http, $routeParams, $location, FileUploader ) {

   $scope.test_var = 'please work!';

)};

路线

rxApp.config(['$routeProvider',
	function($routeProvider) {
		$routeProvider.
		when('/one', {
			templateUrl: 'templates/one.html',
			controller: 'WizardCtrl'
		}).
		when('/two', {
			templateUrl: 'templates/two.html',
			controller: 'WizardCtrl'
		}).
		otherwise({
			redirectTo: '/one'
		});
	}
]);

【问题讨论】：

标签： angularjs angularjs-scope angularjs-view

【解决方案1】：

控制器在转换路由时被释放。至于最佳实践，您应该创建一个服务来处理该数据。您不应该使用控制器在视图之间传输数据。在您的情况下，问题是控制器在转换路线时被处置。

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

【讨论】：

感谢您的解释，Prateek。那个链接失效了。我猜你的意思是：docs.angularjs.org/guide/controller ?
你可以阅读这篇文章以获得更好的理解：controller concept
我一直在研究服务，我认为这就是我的应用程序的整体方向。为了让这个视图正常工作，您建议我将侧边栏移到视图 html 中吗？这是唯一的方法还是有其他方法？喜欢使用局部（我现在正在研究）？在我的所有视图中都需要引用侧边栏。
我没有正确理解您的侧边栏问题。但我认为你应该只将侧边栏保持在单独的视图中。我建议你为侧边栏和主视图制作不同的控制器。使用服务传输范围值（尽管作为一个工作回合，我有时使用了一些东西，比如角度值和 localStorage。PS 不要评判我）。先尝试一下，否则在 jsfiddle 中进行应对 sn-p 更新您的问题，将为您解决
Prateek，为您快速更新。我实现了一项服务来共享数据。我还使用了 Angular UI Router，所以我可以使用多个视图（主视图和侧边栏）。再次感谢你的帮助。 github.com/angular-ui/ui-router

【解决方案2】：

问题在于模型变量的制作。

你必须在模型中有一个点。让你的模型指向一个对象。

所以在你的控制器中这样做 -

rxApp.controller('WizardCtrl',function($scope, $http, $routeParams,$location, FileUploader){

    $scope.test ={
         var : 'please work!'
       };

)};

查看 (One.html)

<input ng-model="test.var" />

<span ng-bind="test.var"></span>

HTML

<body>

    <div ng-app="rxApp" ng-controller="WizardCtrl">

        <div class="ng-view">
        </div>

        <div class="sidebar">
            <span ng-bind="test.var"></span>
        </div>

    </div>

</body>

要了解有关范围的更多信息，请访问UnderStanding Scopes

【讨论】：

感谢 Amit，但 $scope.test = { var = 'please work!' }; 在语法上不正确。这是正确的：$scope.test = { var: 'please work!' }; 我看到结果没有什么不同。
我同意，我的错误没有注意到，告诉我它的功能是否有效。