如何从 AngularJS 中的不同控制器更改表单值

Question

我有以下 html（示例）

<div ng-controller='ctrl-1'>
    <form>
        <input type='text' ng-model='name'/>
    </form>
</div>

和 js 文件为：

app.controller('ctrl-1',function($scope){
    $scope.name = 'john';
});

app.controller('ctrl-2',function($scope){
   /*
    Here I want to change value of 'name' field which is in 'ctrl-1'
    */
});

如何在 angular js 中实现这一点？

Answer 1

虽然可以使用控制器继承或其他方式实现这一点，但最佳实践是将值保留在服务/工厂中：

app.service('MyService', function() {

  this.name = 'John';

}

然后您可以通过将服务注入您的控制器来访问它

app.controller('ctrl-1', function($scope, MyService) {

  $scope.name = MyService.name;

}

app.controller('ctrl-2', function($scope, MyService) {

  $scope.name = MyService.name;

}

编辑：如果您想更改一个控制器中的名称并使其反映另一个控制器中的更改，最好使用一个对象，因为您将在控制器中持有对该对象的引用。

app.service('MyService', function() {

  this.person = {};
  this.person.name = 'John';

}

app.controller('ctrl-1', function($scope, MyService) {

  $scope.person = MyService.person;


}

app.controller('ctrl-2', function($scope, MyService) {
  $scope.person = MyService.person;
  $scope.person.name = 'JFK';
  //MyService.person will now also be updated in 'ctrl-1'
}