我正在尝试执行以下操作:
我有两个通过服务相互通信的控制器(这是我的 jsFiddle:http: //jsfiddle.net/GeorgiAngelov/a9WLr/1/)。
想法:
这个想法是修改一个控制器将反映在另一个控制器的字段中,从而创建实时更新功能。但是,当前 SecondCtrl 同时更新所有 4 个输入字段,反之亦然,并且每个输入也同时更新所有 4 个。
我要完成的工作:
我想要完成的是:每当我单击控制器一中的任何输入字段时,我希望它填充控制器二的输入框,以便控制器二可以实际修改最初单击的输入字段。
HTML
<body ng-app="project">
<div ng-init=" data = [3,4,5,6]">
<h2>{{name}}</h2>
<input ng-model="thing.x"/ ng-repeat="singledata in data" ng-controller="FirstCtrl">
</div>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
</body>
JS
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}