Question

我在index.html中有两个我声明的地方：

<div ng-controller="ParentController>
    <div id="box1" ng-controller="SameController">
        Box1 {{test}} <button ng-click="changeMe()">Click</button>
    </div>

    <div id="box2" ng-controller="SameController">
        Box2 {{test}}
    </div>
</div>

最初在SameController中，$ scope.test =＆＃34; One＆＃34; 我想这样做，以便当用户点击＆＃34;点击＆＃34;按钮，然后{{test}}文本将更改为＆＃34; Two＆＃34;在两个地方（box1和box2）（changeMe函数的作用）。

问题是当我点击时，只有＆＃34; Box1＆＃34;更改为＆＃34; Two＆＃34;，而不是＆＃34; Box2＆＃34;中的消息。我尝试使用：$ scope。$ parent.test =＆＃34; One＆＃34;并使它成为SameController指向它，但它似乎也没有工作。

如何解决这个问题，以便在单击按钮时box1和box2都会更改{{test}}的文本内容？解决方案越优雅越好。

Answer 1

具有ng-controller指令的每个元素都有自己的范围，并且它们没有以任何方式连接。最优雅的解决方案是为常见的应用程序数据设置服务。

app.value('commonData', {});    
app.controller('SameController', function ($scope, commonData) {
  $scope.data = commonData;
  $scope.changeMe = function () {
    $scope.data.test = 'test';
  }
});

并像这样使用

<div ng-controller="ParentController>
<div id="box1" ng-controller="SameController">
Box1 {{data.test}} <button ng-click="changeMe()">Click</button>
</div>

<div id="box2" ng-controller="SameController">
Box2 {{data.test}}
</div>
</div>

您也可以在父作用域中保存公共数据，但不建议这样做，因为SameController被强制为同一父指令的直接后代。

控制器范围分享？

1 个答案: