AngularJS 跨控制器更新文本框

Question

我有以下 html:

<div ng-controller="controller as vm">
  <table class="table table-condensed">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>address</th>
    </tr>
    <tr ng-repeat="item in vm.array" >
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.address}}</td>
      <td><button ng-click="vm.edit(item)">pass the value</button></td>
    </tr>
  </table>

  <form>
    name <input type="text" ng-model="vm.item.name" />
    address <input type="text" ng-model="vm.item.address"/>
  </form>

</div>

<div ng-controller="controller as vm" class="container">
  <form>
    name <input type="text" ng-model="vm.item.name" />
    address <input type="text" ng-model="vm.item.address"/>
  </form>
</div>

以及以下 JS:

angular.module('app', [])
.controller('controller', function($scope) {
var vm = this;
vm.array = [{
  id:1,
  name: 'name1',
  address: 'address1'

}, {
  id:2,
  name: 'name2',
  address: 'address2'
}, {
  id:3,
  name: 'name3',
  address: 'address3'
}];

vm.edit=function(item){
 vm.item = item;
};
});

看到这个笨蛋：http://plnkr.co/edit/haMcXdJTxMwQDmCRFJWX?p=preview 我希望能够在更新第一个表格的同时更新底部第二个表格中的文本。

我正在处理的应用程序有两个面板。左边是列表，右边是表格。当我单击行按钮时，我希望填充右侧的表单。右手html在单独的文件中。共享同一个控制器并不能做到这一点，但我可以使用不同的控制器，但不确定哪种方法最好或如何实现它。我需要服务吗？

谁能指出我正确的方向？

更新：我在这里得到的解决方案：http://jsfiddle.net/VxafF/

我尝试了服务，但是在更新服务时第二个视图模型没有被更新。所以我尝试了 broadcast 和 $emit 这两个方法。我知道使用 $rootscope 不是一个好主意。所以等我有空的时候再想办法。

Answer 1

对于组件通信，您应该使用服务或创建具有输入和输出参数绑定的 angular(1.5+) component。该组件将与负责维护状态的父控制器通信。

您的 app.html 中的 html 将包含类似于下面的内容。

app.html

<section>Sidebar
<p>{{vm.item.name}}</p>
</section>
<section>Main   
  <my-form-component item="vm.item" on-update="vm.onUpdate($event)"> </my-form-component>    
<section>

app.controller.js

app.controller('controller',function($scope) {
   var vm = this;
   vm.item = {name:''};
   vm.onUpdate = function(item) {
   vm.item = item; 
  }
});

form.component.js

app.component('myFormComponent', {
  templateUrl: 'myFormTemplate.html',
  bindings: {
   item: '<', 
   onUpdate:'&'
  },
  controller: function() {
    this.$onChanges = function(changeObj) {
    this.onUpdate(changeObj.item); //output item to parent
    }
  }
});

AngularJS 跨控制器更新文本框

AngularJS update text box across controllers

javascript

shared

controllers

angularjs