在AngularJS中的控制器之间共享数据

Question

我学习如何在控制器之间共享数据，但我遇到了一些问题。

我有这样的HTML视图：

<div ng-app="MyApp">
    <div ng-controller="firstCtrl">
        <input type="text" ng-model="data.message"/>    
        {{data.message}} 
    </div>
    <div ng-controller="secondCtrl">
        <input type="text" ng-model="data.message"/>    
        {{data.message}}    
    </div>
    <div ng-controller="thirdCtrl">
        <input type="text" ng-model="data.message"/>    
        {{dataTwo.messageTwo}}
    </div>  
</div>  

我的脚本看起来像这样：

var myApp = angular.module("MyApp",[]);

myApp.service("Data", function() {
    return {
        message : "Hello World",
    }
 });

function firstCtrl($scope, Data) {
    $scope.data = Data; 
};

function secondCtrl($scope, Data) {
    $scope.data = Data;     
};

function thirdCtrl($scope, Data) {

    $scope.data = Data; 
    $scope.dataTwo = {
        messageTwo : $scope.data.message    
    };

};

我使用＆＃34; Service＆＃34;连接我的控制器。一切都很好，但在第三控制器＆＃34; dataTwo.messageTwo＆＃34;我将新值传递给输入字段时没有改变.DataTwo.messageTwoi的值是整个时间相同（＆＃34; Hello World＆＃34;）。

我做错了什么？

Answer 1

dataTwo.messageTwo未绑定到$scope.data.message。它只是在创建控制器期间获得其值。因此不可能以这种方式进行约束。
如果您想要更改dataTwo，您需要在输入模型中定义它，如下所示：ng-model="dataTwo.messageTwo"。

Answer 2

更改您的第三个ng模型

<div ng-controller="thirdCtrl">
    <input type="text" ng-model="dataTwo.messageTwo"/>    
    {{dataTwo.messageTwo}}
</div>  

Answer 3

您可以$watch更改消息，并相应地更新第二个对象：

function thirdCtrl($scope, Data) {

    $scope.data = Data; 

    $scope.dataTwo = {
        messageTwo : $scope.data.message
    };

    $scope.$watch('data.message', function (message)
    {
        $scope.dataTwo.messageTwo = message;
    });

};

但是你不应该滥用$watch，并且根据你想要实现的目标，你可能能够重构代码并以另一种方式进行。

Answer 4

当您说messageTwo : $scope.data.message时，在子范围上创建了一个新对象，并且该值已分配给messageTwo。这意味着$scope.data中的更改将不再反映在messageTwo中。如果您仍想更新messageTwo，请写一个手表。

$scope.watch('data.message',  function (newValue, oldValue) {
  $scope.dataTwo.messageTwo = newValue;
}

Answer 5

如果您希望$watch与data.message同步而不更改dataTwo.messageTwo中的模型，则可以使用ngModel。或者你可以用ES5 defineProperty：

来搞笑

$scope.dataTwo = {};

Object.defineProperty($scope.dataTwo, 'messageTwo', {
    get: function() {
        return $scope.data.message;
    }
});

演示：http://plnkr.co/edit/2BRJNzOyfVxrAqIS0dXs?p=preview

_{注意：此示例中的defineProperty是IE9 +。}