Question

我使用过多种语言和环境（主要是iOS和C＃），并且总是设法避免使用脚本语言。这种避免条纹已经突然结束：因为一个巨大的棱镜项目被抛到了我的腿上 - 现在我正在争先恐后地去理解这个非常奇怪的世界。一些功能真的很酷，其他技术让我彻底困惑。我花了几周时间阅读教程，学习示例，但仍然无法解决有关最佳实践和代码结构的相对简单的问题。

这就是我需要做的：我有一个表单，用户将在其中输入数据（为了参数，它的两个数字类型字段。）我需要在顶部有一个横幅页面上有两个输入字段的总和 - 这本身就相对容易 - 但对我来说问题是在后续页面上重复这个横幅。

主页将包含指向：

的链接

    page 1
    page 2

第2页的链接在第1页上的用户输入数据之前将无法使用，从而迫使用户首先访问第1页。 banner元素需要是一个单独的文件。第2页是数据的被动显示，第1页只是可以主动编辑数据的页面。

第1页：看起来像这样 -

banner.html (sum of fields A & field B)

input field A
input field B

第2页：

banner.html (sum of field A & field B)

Lorem Ipsum ....

实现此任务的最佳方法是什么？

Answer 1

您可以拥有一个顶部带有横幅的索引页面，以及使用相同控制器的部分页面。横幅的值将是控制器变量。

要在索引页面内使用部分内容，您需要包含ngRoute模块以及链接到它的脚本标记。

你会有这样的div。

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

你的partialRoutes.js文件看起来像这样。

myApp.config(function($routeProvider){
  $routeProvider
    .when('/',{
        templateUrl: './partials/things.html'
    })
    .when('/stuff',{
        templateUrl: './partials/stuff.html'
    })
    .when('/otherstuff',{
        templateUrl: './partials/otherstuff.html'
    })
    .otherwise({
        redirectTo: '/',
    })
});

当你包含ngRoute时，它会看起来像这样。

var myApp = angular.module('myApp', ['ngRoute']);

以下是ngRoute的文档。希望我帮忙。

https://docs.angularjs.org/api/ngRoute

Answer 2

就个人而言，我会有一项服务，我们称之为userData。然后，您的inputController会将输入的详细信息写入userData服务。

然后，您的bannerController会收到有关userData服务中数据更改的通知（通过$watch或$broadcast）

这样，当您切换页面时，bannerController不应更改，并仍会显示此信息

注意：这取决于您使用某种AngularJS路由技术，如NGroute或UI路由器。如果进行了硬页面导航，那么userData必须存储在服务器端。

横幅最好留在任何ui-view之外，以便它不受导航影响，但如果是，那么userData服务仍然有效并保持正确的数据当它被重新创建时，它将有权访问相同的数据

Answer 3

如果两个页面都有相同的控制器，则可以使用$ scope来实现此目的。如果页面具有不同的控制器，则可以使用$ rootScope来共享变量。

Angular js - 跨多个html页面回显数据

3 个答案: