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

发布时间：2020-12-17 17:47:42 所属栏目：安全来源：网络整理

导读：我喜欢AngularJS不需要和模型的特殊语法,但有一种情况我似乎无法理解.请采取以下措施我的dataService包含了我正在使用的任何数据存储空间： app.factory('dataService',function() { var data = 'Foo Bar'; return { getData: function() { return data; }

我喜欢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',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中实现它.

有什么建议？

解决方法

我建议将它变为有效的变化很少.

>将数据对象从字符串更改为对象类型
>使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!