如何在没有$ rootscope的情况下为同一页面上的分区分配一个控制器

Question

我的一个 controller是通过使用状态文件与html绑定的，但是我希望相同的controller也可以与另一个页面一起使用。但是该页面有其自己的controller，这就是为什么我使用ng-controller属性将我的controller包括在特定DIV中的原因。现在，我的第一页与controller正确绑定，第二页也与同一controller绑定，但问题是我在第一页中进行一些更改时，这些更改不会反射回第二页。

我该如何实现？

关于如何实现这一目标有什么好建议？

这是 plunker demo

我想在更改时反映两者的变化。

Answer 1

让父级控制器适合您吗？我建议的另一种方法是使用服务在控制器之间共享数据

https://plnkr.co/edit/wensnuliluycndyaeihu?p=preview

<div ng-controller="ParentController">
      <div ng-controller="Mycontroller">
  <p>Hello {{$parent.name}}!</p>
  <label>Name:
    <input ng-model="$parent.name" type="text" />
  </label>
</div>
<div ng-controller="Mycontroller">
  <p>Hello {{$parent.name}}!</p>
  <label>Name:
    <input ng-model="$parent.name" type="text" />
  </label>
</div>
</div>

var app = angular.module('plunker', []);
app.controller('Mycontroller', function($scope) {
});
app.controller('ParentController', function($scope) {
    $scope.name = 'World';
});

使用服务https://plnkr.co/edit/owi9lggkfvorg13kdnao?p=preview

<div ng-controller="Mycontroller">
  <p>Hello {{myService.name}}!</p>
  <label>Name:
    <input ng-model="myService.name" type="text" />
  </label>
</div>
<div ng-controller="Mycontroller">
  <p>Hello {{myService.name}}!</p>
  <label>Name:
    <input ng-model="myService.name" type="text" />
  </label>
</div>
var app = angular.module('plunker', []);
app.controller('Mycontroller', function($scope, MyService) {
    $scope.myService = MyService;
});

app.service("MyService", function() {
  this.name = "World";
});