javascript - Angularjs中页面之间的数据绑定(bind)

Question

我想了解 Angularjs 中的数据绑定(bind)。

我想做的是在页面之间建立绑定(bind)，如果我更改 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}}。

在 .js 文件中，我们有 $routeProvider，它将模板 url 作为“second.html”， Controller 是“MyCtrl”。

所以 Controller 是:

MyApp.controller(function($scope){

 $scope.value="somevalue";

 })

通过上述方式，second.html 上的 {{value}} 获得值“somevalue”。这是来自 Controller 。

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

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

为了理解清楚问题，假设first.html上有一个用于输入文本的输入框和一个提交按钮，那么我想在second.html页面上获取first.html的文本框的Input值提交。

Answer 1

使用服务并将您的模型存储在那里。 Gloopy 已经有一个很好的例子:https://stackoverflow.com/a/12009408/215945
一定要使用对象属性而不是原始类型。

如果你更愿意使用 $rootScope，那么像上面那样，定义一个对象，而不是一个原始类型:

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

然后在您的 View 中绑定(bind)到该对象属性:

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