Javascript 如何在另一个html文件[angularjs]中显示用户输入

如何在AngularJS的另一个html文件中显示用户的输入

<div ng-app>
  <div>
    <label>Input:</label>
    <input type="text" ng-model="uInput" placeholder="Enter text here">
    <hr>
  </div>
</div>

输入：

---

另一个文件：

<div>
   <h1>{{ uInput }}</h1>
</div>

{{uInput}

---

现在，它接受输入，但不在新页面中显示

---

换句话说，如何将用户输入传递到其他视图？

我假设您熟悉路线和服务

使用服务，首先加载

$scope.first_controller= uInput;

然后使用服务

myservice.variablename = $scope.first_controller;

然后：

您应该在其他视图中显示，如下所示：

{{  second_controller }}

---

最简单的方法是，两个页面使用相同的控制器

Page1.html

<div ng-app="app">
  <div ng-controller="someController">
    <label>Input:</label>
    <input type="text" ng-model="uInput" placeholder="Enter text here">
    <hr>
  </div>
</div>

<div ng-app="app" ng-controller="someController">
   <h1>{{ uInput }}</h1>
</div>

---

或者，您可以使用服务注入、路由等。

以及如何将用户输入发送到另一个文件？对这两个文件使用相同的控制器。您将如何做到这一点@第一种简单的方法是声明一个控制器，比如，

ng controller=“someController”

。在

body

或

div

或您在这两个页面上使用的任何内容上声明这些内容。因此，基本上两个页面将使用相同的控制器，并且在范围上应具有相同的值。第二种方式，你可以有路由设置，在那里你可以提到模板url和控制器。在这里，您的模板URL应为

“page1.html”

和

“page2.html”

，但控制器声明可以与

“someController”

相同。

<div ng-app="app" ng-controller="someController">
   <h1>{{ uInput }}</h1>
</div>

app.controller('someController', function($scope){
    //your controller code, bind variables here
    //in this case, just the declaration will do
});