Question

我正在处理单页表单，我决定使用Angular，因为我的jQuery实现很快变成了意大利面条。

我的表单的一个主要特性是有许多单独的输入将更新其他输入的值。此外，每个＆＃34;输入＆＃34;可能实际上是多个输入（想想＆＃34;英寸＆＃34;输入一个<select>来确定整个英寸，另一个<select>来确定分数英寸）;

现在我只想在单独的控制器中绑定输入，这样当某些内容的值发生变化时，我可以在另一个控制器中看到该更新。研究Angular，看起来这就是使用服务的原因。

考虑以下代码（http://jsfiddle.net/qn7yb74d/处小提琴）：

<div ng-controller="AController">
    <select name="" id="" ng-model="selected.item">
        <option value="A">Option A</option>
        <option value="B">Option B</option>
    </select>
</div>

<div ng-controller="BController">
    <input type="text" ng-model="myItem">
</div>

<script type="text/javascript">
var myApp = angular.module('myApp',[]);

myApp.service('myService', function(){
    this.selected = {
        item: 'A' // I want this to return the currently selected value - If val is changed to 'B', update the text input accordingly.
    }
});

myApp.controller('AController', ['$scope', 'myService', function($scope, myService){
    $scope.selected.item = myService.selected.item;
}]);

myApp.controller('BController', ['$scope', 'myService', function($scope, myService){
    $scope.myItem = myService.selected.item;
}]);
</script>

简而言之，我希望对AController select输入的任何更改都会反映在BController的{{1}}字段中。当您选择＆＃34;选项A＆＃34;时，我希望值（＆＃34; A＆＃34;）显示在输入字段中。

当值发生变化时，如何通过服务在单独的控制器中更新模型？

Answer 1

将selected对象从myService复制到两个控制器的范围内。

myApp.controller('AController', ['$scope', 'myService', function($scope, myService){
    $scope.selected = myService.selected;
}]);

myApp.controller('BController', ['$scope', 'myService', function($scope, myService){
    $scope.mySelected = myService.selected;
}]);

在每个AController或BController selected或mySelected中都会引用同一个对象。您可以在为AController或BController创建的范围内绑定此对象。

<div ng-controller="AController">
    <select name="" id="" ng-model="selected.item">
        <option value="A">Option A</option>
        <option value="B">Option B</option>
    </select>
</div>

<div ng-controller="BController">
    <input type="text" ng-model="mySelected.item">
</div>

我把它放在complete working fiddle中。这样做需要添加ng-app并在onLoad之前加载模块。

Answer 2

不确定如何放置控制器。

你可能想看看这个： http://onehungrymind.com/angularjs-communicating-between-controllers/

在一个控制器中

$rootScope.$broadcast('foo',data)

在其他控制器中

$rootScope.$on('foo', data)

使用服务在控制器之间传递数据

2 个答案: