javascript - AngularJS:如何使用 $route.reload() 更新 ng-view

Question

我搜索了很多关于 $route.reload() 的问题，但我认为我对它和 Angular 的实际工作方式仍然存在根本性的误解。我真的很想了解实际发生了什么(不仅仅是快速修复)所以如果这个问题变得相当冗长，我深表歉意。

我正在尝试创建一个应用程序，允许用户将信息输入到表单中，然后使用 ng-view 和 Controller 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 显示的部分 View 。

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

这两个页​​面都由同一个 Controller 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 时，所有这些都按预期工作，但是当用户更改文本输入中的名称时，ng-view 显示我的 styled_form.html 页面并没有改变。这也是有道理的，因为需要使用新信息重新加载 styled_form.html。

这是新手开始的地方。我的第一个想法是创建一个刷新按钮并在我的 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 文档之后，我对正在发生的事情有一种预感。它指出...

Causes $route service to reload the current route even if $location hasn't changed.

As a result of that, ngView creates new scope and re-instantiates the controller.

因此，如果我正确理解了文档(我显然没有正确理解)，那么在 $route.reload() 上实际发生的事情是，当重新加载 styled_form.html 时，更新的 $scope.form_name 被清除，并且原始 $scope 值显示在页面上。所以……

问题 1:我的理解是否正确，即 $route.reload() 是否清除了我的 $scope 并重新加载了旧的 $scope 变量，或者我的 $route.reload() 只是没有是否要重新加载页面？

现在，如果我正确地解释了我的问题，我的猜测(在其他主题中建议)是解决方案是创建某种类型的服务来存储我的数据，然后在 Controller 内部调用该服务。这个工作流看起来像

User input --> Data stored in some Service(factory) --> Data Passed to $scope --> >$scope value displayed in partial view (styled_form.html)

但我不知道如何在服务中动态存储用户输入。理想情况下，这一切都将实时发生(与第一个简单示例一样)，因为我想避免使用刷新按钮。这可以通过在我的 Controller 中创建一个每隔几秒更新一次我的服务中的值的函数来实现吗？我需要比我有更好想法的人为我指明正确的方向。

问题 2:假设 Q1 正确，这是否是正确的工作流程？如果是，设置我的服务以处理用户输入并将其动态传递到另一个 html 页面的正确方法是什么？

非常感谢所有帮助

Answer 1

有一个服务来存储数据和同一个 Controller 来服务这两个 View 是很好的。

当 Controller 变量发生变化时，每次都可以保存数据。

初始化新 Controller 时，它会从服务中读取日期。将为每个 View 创建一个单独的 Controller 实例。

您还可以查看此博客以了解应如何在服务中定义数据，以便更改此类数据将自动触发 Controller 以更新 View :

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

注意:该服务返回对数组的引用， Controller 在创建时保存该引用。