Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
AngularJS模型、多个$scope和双向数据绑定_Angularjs - Fatal编程技术网

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

AngularJS模型、多个$scope和双向数据绑定,angularjs,Angularjs,我喜欢AngularJS不需要特殊的语法和模型,但有一个场景我似乎无法理解。采取以下措施 我的数据服务包装了我正在使用的任何类型的数据存储: app.factory('dataService', function() { var data = 'Foo Bar'; return { getData: function() { return data; } }; }); 我有两个控制器,都访问同一段数据: app.

我喜欢AngularJS不需要特殊的语法和模型,但有一个场景我似乎无法理解。采取以下措施

我的数据服务包装了我正在使用的任何类型的数据存储:

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>

{{data}}

我理解这是如何在类似击倒的情况下工作的,在这种情况下,我将被迫使数据成为击倒的可观察对象。因此,应用程序一部分中的任何修改都会触发另一部分中的订阅和更新视图。但我不知道该怎么做


有什么建议吗?

我没有遇到过同样的情况,但我突然想到的是你在范围内坚持的东西。有一个角度的视频讨论了范围。您应该将模型对象放在范围中,而不是将范围用作模型对象

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


这是未经测试的,但应该根据我对angular工作原理的了解来工作。

我建议对其进行一些修改

  • 将数据对象从字符串更改为对象类型
  • 用于绑定输入字段
  • HTML


    演示:

    如果<代码>数据是对象范围,则对象范围将共享对同一对象的引用,当数据是原始数据时,它们独立保留值问题与角度无关,这正是javascript在@charlietfl中的工作方式。当使用像knockout这样的模型层时,您正在为所有要观察的对象创建对象。移除这一层,就看不出原语是如何被监控的了(就像你的提琴所显示的那样)。话题之外,相关的,你能看看我的q@RoyiNamir吗?我会有一个战利品的。。。但我不是一个有棱角的专家
    <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;
            }
        };
    });