AngularJS：如何使用$ route.reload（）更新ng-view

Question

我已经搜索了很多关于$ route.reload（）的问题，我想我仍然对它和Angular实际工作有一个基本的误解。我真的很想理解实际发生的事情（不仅仅是一个快速解决方案），所以我很抱歉如果这个问题变得比较冗长。

我试图创建一个应用程序，允许用户将信息输入到一个表格，然后使用NG-视图和控制器LivePreviewController形式的“实时预览”显示表单数据它具有一些独特的样式和与用户不输入自己的表单相关的其他信息。

这是很简单的，如果“即时预览”是在同一页上出现的用户使用的是类似这样的

<input type="text" ng-model="form_name" /> 
<div ng-bind="form_name"></div> 

东西，我想什么做的输入信息是这样做的。

<!--Location is: localhost:8888/form_page.html --> 
<input type="text" ng-model="form_name" /> 

<!-- ng view is displaying the partial view: styled_form.html --> 
<div ng-view></div> 

然后我有另一个页面styled_form.html是由ng-view div显示的局部视图。

<!-- partial view page is styled_form.html --> 
<div ng-bind="form_name"></div> 

这些网页的两个由相同控制器LivePreviewController控制。

有很多事情我想象我可能做错了。首先可能是路由。我在路由方面遇到了一些问题，因为应用仅在多页网站的一页上使用，我的路由设置如下。

var previewApp = angular.module('previewApp', ['ngRoute']); 
previewApp.config(['$routeProvider', function($routeProvider){ 
    $routeProvider 
     .otherwise({ 
      redirectTo:'/styled_view.html', 
      controller: 'LivePreviewController' 
     }); 
}]); 

//Controller Code 

previewApp.controller('LivePreviewController', [$scope, $route, function($scope, $route){ 
    $scope.form_name = 'temporary name'; 
}]); 

所有这一切工作最初加载form_page.html时不如预期，但是当用户在文本输入更名显示我styled_form.html页NG-视图没有改变。这也是有道理的，因为styled_form.html需要重新加载新信息。

这里是noob开始的地方。我的第一个倾向是创建一个刷新按钮，并在我的LivePreviewController增加一个功能使用$ route.reload（）

previewApp.controller('LivePreviewController', [$scope, $route, function($scope, $route){ 
    $scope.form_name = 'temporary name'; 

    $scope.refreshPage = function() { 
     $route.reload(); 
     console.log($scope.form_name) //to ensure scope is updating 
    }; 

}]); 

刷新页面，然后更新我的HTML，包括按钮如下

<!--Location is: localhost:8888/form_page.html --> 
<input type="text" ng-model="form_name" /> 

<button ng-click="refreshPage()"> Update the Page </button> 

<!-- ng view is displaying the partial view: styled_form.html --> 
<div ng-view></div> 

当按钮被点击并且更新后的范围变量显示在控制台中时，该函数正常工作，但是我的实时预览没有更新。看完Angular文档后，我对于发生的事情有了一种预感。它陈述...

导致$ route service重新加载当前路由，即使$ location没有改变。

因此，ngView创建新的范围并重新实​​例化控制器。

因此，如果我正确理解文档，我明显不了解，$ route上实际发生了什么。reload（）是当styled_form.html被重载时，更新后的$ scope.form_name将被清除，原始的$ scope值将显示在页面上。所以...

问题1：我理解这个正确的，即$ route.reload（）抹掉我的$范围和重新加载旧的$范围变量，或者是我的$ route.reload（）只是没有重新加载页面？

现在，如果我正确解释我的问题，我的猜测（见其他主题中的建议）是解决方案是创建某种类型的服务来存储我的数据，然后在控制器内调用该服务。此工作流将类似于

用户输入 - 存储在某种服务（工厂）>数据 - >数据传递给$范围 - 在局部视图（styled_form.html）显示>> $范围值

但我失去了如何动态地存储服务内的用户输入。理想情况下，这将全部实时发生（就像第一个简单示例一样），因为我想避免使用刷新按钮。这可以通过在我的控制器中创建一个函数来实现，该函数每隔几秒更新一次服务中的值。我需要一个比我自己有更好想法的人来指引我朝着正确的方向前进。

问题2：这是正确的工作流假设Q1是正确的，如果是的话是什么来建立我的服务来处理用户输入并动态地传递到另一个HTML页面的正确方法是什么？

所有帮助非常感谢

Answer 1

有一个服务来存储数据和同一个控制器同时服务的观点是好的。

当控制器变量发生变化时，每次都可以完成数据保存。

当新控制器初始化时，它从服务中读取日期。将为每个视图创建一个单独的控制器实例。

你也可以检查这个博客上看到，如何将数据应该在服务中进行定义，以便改变这样的数据将自动触发控制器来更新视图：

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

注意：该服务回报数组和控制器的引用会在创建时保存该引用。

Answer 2

好了，所以我意识到我的问题是由于我误解$ scope在Angular中的工作方式，而不是$ route.reload（）如何工作。本主题

$scope variable not changing in controller when changed using directive

而这个链接在这个问题

https://github.com/angular/angular.js/wiki/Understanding-Scopes

帮助我理解我在做什么错。 $ route.reload（）和$ templateCache.remove（）工作正常。问题是我的$ scope变量没有正确更新，因为每个视图都创建了一个不同的范围。解释其中一个链接

$ scope不是模型。

控制器的功能是从模型写入范围

的视图的功能是显示了$范围，如果需要

写入模型我解决了这个问题使用这样的答案讨论的controllerAS语法，

.controller('LivePreviewController',['$scope', function($scope) { 
    var vm = this; 
    vm.form_name = 'temporary name'; 
}]); 

<!-- form_page.html --> 
<div ng-controller="LivePreviewController as ctrl"> 
    <input type="text" ng-model="ctrl.form_name> 

在我的风格形式局部视图

<!-- styled_form.html --> 
<div> {{ctrl.form_name}} </div> 

这使一切工作按预期