Javascript Angularjs中页面之间的数据绑定

我试图理解Angularjs中的数据绑定

我想做的是在页面之间建立绑定，即如果我更改first.html上的输入，那么数据应该在second.html中自动更改

比如说,， 这是first.html：

<div ng-controller="MyCtrl">
  <input type="text" ng-model="value"/><br>

   {{value}}

<a href="#/second"><input type="submit" value="Second page"/></a>
</div>

通过上述方法，second.html上的{{value}}将获得值somevalue。这是从控制器提交的

但是，如果我动态地更改first.html上的输入值，则second.html上的值不会得到该值

我的问题是如何将second.html上的值与first.html自动绑定

---

为了清楚地理解问题，假设first.html上有一个用于输入文本的输入字段和一个提交按钮，然后，我想在提交时获取第二个.html页面上first.html的文本字段的输入值。

如果将数据附加到$rootScope，则If将在跨控制器的转换中幸存，并成为所有$scope原型继承魔法的一部分

//**attach in controller1:**
function MyCtrl1($rootScope) {
    $rootScope.recs= { rec1 : "think philosophically" };
}

//**do nothing in controller for view2:**
function MyCtrl2($scope) {
  //nothing
}

//**Markup for view2: automaticall makes use of data in $routeScope**
<p>Try doing this: {{recs.rec1 }}</p>

//**markup for view1 to respond to OPs question in comments**:
<input ng-model="recs.rec1" />

更新：创建自定义服务是处理此问题的一种更具可伸缩性和结构合理的方法，但$rootScope方法是一种快速且肮脏的方法

---

更新2：添加view1标记以响应OP问题，编辑示例以利用正确的建议来使用对象而不是原语。

如果将数据附加到$rootScope，则If将在跨控制器的转换中幸存，并成为所有$Scope原型继承魔法的一部分

//**attach in controller1:**
function MyCtrl1($rootScope) {
    $rootScope.recs= { rec1 : "think philosophically" };
}

//**do nothing in controller for view2:**
function MyCtrl2($scope) {
  //nothing
}

//**Markup for view2: automaticall makes use of data in $routeScope**
<p>Try doing this: {{recs.rec1 }}</p>

//**markup for view1 to respond to OPs question in comments**:
<input ng-model="recs.rec1" />

更新：创建自定义服务是处理此问题的一种更具可伸缩性和结构合理的方法，但$rootScope方法是一种快速且肮脏的方法

---

更新2：添加view1标记以响应OP问题，编辑示例以利用正确的建议使用对象而不是原语。

使用服务并将模型存储在那里。Gloopy已经有了一个很好的例子： 请确保使用对象属性而不是基元类型

如果您希望使用$rootScope，那么如上所述，定义一个对象，而不是一个原语：

$rootScope.obj = { prop1: "somevalue" }`

然后在视图中绑定到该对象属性：

<input type="text" ng-model="obj.prop1">
{{obj.prop1}}

---

使用服务并将您的模型存储在那里。Gloopy已经有了一个很好的例子： 请确保使用对象属性而不是基元类型

如果您希望使用$rootScope，那么如上所述，定义一个对象，而不是一个原语：

$rootScope.obj = { prop1: "somevalue" }`

然后在视图中绑定到该对象属性：

<input type="text" ng-model="obj.prop1">
{{obj.prop1}}

---

找到了我想要的解决方案，解决方案在Angular文档中，这是链接

---

该链接上的示例部分回答了我的问题。

找到了我所寻找的解决方案，解决方案在Angular docs中，这是链接

---

---

该链接上的示例部分回答了我的问题。

您应该使用$broadcast、$emit或scope communication。尽量避免使rootScope过载。将数据保存到应用程序会话中是一种不好的做法。

您应该使用$broadcast、$emit或scope communication。尽量避免使rootScope过载。将数据保存到应用程序会话中是一种不好的做法。

请提供Plunker或JSFIDLE链接。请提供Plunker或JSFIDLE链接。如果我们必须动态输入值，比如从第一个视图的输入中输入值，这不起作用，我指的是第二个视图的绑定。如何实现这一点。请参阅上面的更新。您的双向绑定无法工作，因为存在基元。如果出于某种原因需要使用字符串，您可以使用事件侦听器并重置作用域对象OneEvent，但对象包装器几乎肯定更好。让我清楚地解释一下我要查找的内容，假设first.html上有一个用于输入文本的输入字段和一个提交按钮，然后我想在Submit上获取第二个.html页面上first.html文本字段的输入值。上面的代码不需要Submit按钮就可以做到这一点，如果您希望它只在表单Submit上工作，请在此处查看：找到了我要找的解决方案，无论如何，谢谢你的帮助。如果我们必须动态地输入值，比如说从第一个视图的输入，这是不起作用的，我指的是第二个视图的绑定。如何实现这一点。请参阅上面的更新。您的双向绑定无法工作，因为存在基元。如果出于某种原因需要使用字符串，您可以使用事件侦听器并重置作用域对象OneEvent，但对象包装器几乎肯定更好。让我清楚地解释一下我要查找的内容，假设first.html上有一个用于输入文本的输入字段和一个提交按钮，然后我想在Submit上获取第二个.html页面上first.html文本字段的输入值。上面的代码不需要Submit按钮就可以做到这一点，如果您希望它只用于表单提交，请在此处查看：找到了我所寻找的解决方案，无论如何，感谢您的帮助。让我清楚地解释一下我正在寻找的内容，假设有一个用于输入文本的输入字段和fi上的提交按钮

---

rst.html，然后我想在提交时获取第二个.html页面上first.html的文本字段的输入值。因此，无论何时first.html上的输入发生变化，second.html中的值都应该得到该值。我所描述的将起作用，除非提交意味着您没有使用角度路由，并且浏览器从web服务器获取新页面。在这种情况下，Angular无法帮助您，因为您正在second.html上重新加载Angular。所谓提交，我的意思是使用Angular的$rootProvider进入下一页，例如$routeProvider。当“/second”时，{templateUrl:second.html，controller:MyCtrl}**并将/second分配给**。找到了我想要的解决方案，无论如何感谢您的帮助。让我清楚地解释一下我想要的是什么，假设first.html上有一个用于输入文本的输入字段和一个提交按钮，然后我想在Submit上获取第二个.html页面上first.html的文本字段的输入值。因此，无论何时first.html上的输入发生变化，second.html中的值都应该得到该值。我所描述的将起作用，除非提交意味着您没有使用角度路由，并且浏览器从web服务器获取新页面。在这种情况下，Angular无法帮助您，因为您正在second.html上重新加载Angular。所谓提交，我的意思是使用Angular的$rootProvider进入下一页，例如$routeProvider。当“/second”时，{templateUrl:second.html，controller:MyCtrl}**并将/秒分配给**。找到了我想要的解决方案，无论如何，感谢您的帮助。