1

我正在尝试了解 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}}。

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

所以控制器是：

MyApp.controller(function($scope){

 $scope.value="somevalue";

 })

通过上述方式，second.html 上的 {{value}} 正在获取值“somevalue”。这是来自控制器。

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

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

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

4

4 回答 4

3

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

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

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

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

<input type="text" ng-model="obj.prop1">
{{obj.prop1}}
于 2013-02-27T23:42:28.607 回答
1

如果您将数据附加到 $rootScope if 将在控制器之间的转换中幸存并成为所有 $scopes 的一部分（原型继承魔法）

//**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 问题，编辑示例以利用正确的建议来使用对象而不是原始的。

于 2013-02-27T22:37:41.987 回答
0

找到了我正在寻找的解决方案，解决方案在 Angular 文档中，这里是链接http://docs.angularjs.org/cookbook/deeplinking。

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

于 2013-03-02T02:35:29.103 回答
0

You should user $broadcast, $emit or scope communication. Try to avoid overloading the rootScope. It is as a bad practice as saving data into the application sessions.

于 2014-04-21T19:41:23.570 回答