Question

我喜欢AngularJS不需要和模型的特殊语法，但有一种情况我似乎无法解决。采取以下

我的dataService包含了我正在使用的任何数据存储空间：

app.factory('dataService', function() {
    var data = 'Foo Bar';

    return {
        getData: function() {
            return data;
        }
    };
});

我有两个控制器都访问同一条数据：

app.controller('display', function($scope, dataService) {
    $scope.data = dataService.getData();
});

app.controller('editor', function($scope, dataService) {
    $scope.data = dataService.getData();
});

如果我有两个视图，其中一个修改数据，为什么另一个不自动更新？

<div ng-controller="display">
<p>{{data}}</p>
</div>

<div ng-controller="editor">
<input type="text" value="{{data}}"/>
</div>

我理解这是如何工作在像Knockout这样的东西，我将被迫使数据成为一个淘汰可观察对象。因此，应用程序的一部分中的任何修改都会触发另一部分的订阅和更新视图。但我不确定如何在Angular中实现它。

有什么建议吗？

Answer 1

我建议做些改动以使其发挥作用。

将数据对象从字符串更改为对象类型
使用ng-model绑定输入字段

HTML

<div ng-controller="display">
  <p>{{data.message}}</p>
</div>

<div ng-controller="editor">
  <input type="text" ng-model="data.message"/>
</div>

脚本

app.factory('dataService', function() {
    var data = {message: 'Foo Bar'};

    return {
        getData: function() {
            return data;
        }
    };
});

演示：Fiddle

Answer 2

我并没有遇到同样的情况，但是跳出来的东西就是你坚持的范围。有一个角度视频讨论了范围。您应该将模型对象放在范围中，而不是将范围用作模型对象。

在您的示例中，将使用字符串data创建两个范围。由于data是一个字符串且不可变，因此在更改时将在编辑器范围内替换它。在您的示例中，如果您有dataService返回一个对象并且该对象在控制器之间共享，那么您的问题可能会得到解决。尝试dataService返回model {data：data}并绑定到model.data而不是data。

这是未经测试的，但应根据我如何知道角度工作而发挥作用。

AngularJS模型，多个$ scope和双向数据绑定

2 个答案: