与服务控制器之间传递数据 [英] Passing data between controllers with a service

问题描述

我的工作单页的形式，我已经决定用角与我的jQuery的执行很快变成面条上。

I am working on a single page form that I've decided to use Angular with as my jQuery implementation was quickly turning into spaghetti.

我的形式的主要特点是，有许多独立的输入，将更新的其他输入值。此外，每个输入实际上可能是多个输入（认为是英寸输入一个＆LT;选择＆GT; 来确定整个英寸，另一个＆LT ;选择＆GT; 来确定分数英寸）;

A primary feature of my form is that there are many separate inputs that will update the values of other inputs. Furthermore, each "input" might actually be multiple inputs (think an "inches" input with one <select> to determine whole inches, another <select> to determine fractional inches);

现在我只是希望能结合在单独的控制器的输入，这样，当东西的价值的变化，我可以看到在另外一个控制器更新。学习角，看起来这是一个使用服务究竟是什么的。

Right now I just want to be able to bind inputs in separate controllers so that when the value of something changes, I can see that update in another controller. Studying Angular, it looks like this is what using a service was made for.

考虑以下code（小提琴在 http://jsfiddle.net/qn7yb74d/ ）

Consider the following code (fiddle at 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 的选择输入到<$ C $得到体现C> BController 的输入字段。当您选择选项A，我希望值（A）在输入字段中显示。

Simply put, I want any changes to AController's select input to be reflected in BController's input field. When you choose "Option A", I want the value ("A") to be shown in the input field.

如何通过服务更新一个单独的控制器模型时的数值变化？

推荐答案

复制选从对象为myService 进入范围为两个控制器。

Copy the selected object from myService into the scope for both controllers.

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 选或 mySelected 将指向同一个对象。你可以下创建范围绑定到该对象为 AController 或 BController 。

In every AController or BController selected or mySelected will refer to the same object. You can bind to this object under scopes created for either AController or 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>

我已经把这个在完成工作小提琴。这样做需要添加 NG-应用和的onLoad 。

这篇关于与服务控制器之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！