如何管理作爲同一對象的一部分，但放置在AngularJs DOM不同部分的數據？

Question

我有一個名爲搜索條件的表單。此表單位於頁面的左側，並管理將哪些條件發佈回服務器。我可以很容易地將這個表格包裝在自己的控制器中。但是我在頁面中的一個完全不同的地方有一個下拉菜單，這也是發送到服務器的標準的一部分。

現在我已經創建了每個部分的兩個不同的控制器和我也有一個工廠管理所述組合的搜索標準時，第一頁被加載的時候，或者當它在任何這些兩個控制器的變化。

我會採取正確的做法還是有更好的辦法？

有直接在我的DOM綁定使用來自工廠的數據嗎？

Answer 1

正確的，你是在正確的方向，看看這都是我爲你創建的，在我的範圍變量，它提供了訪問服務變量增值服務的Plunkr。服務內部的對象將很容易在視圖中訪問。

HTML

<div ng-controller="Ctrl1" style="float: left"> 
    Upper Section 
    <div ng-repeat="i in [1,2,3,4,5]" ng-class="{green: dataService.data.selected == i, red: dataService.data.selected != i}" 
    ng-click="dataService.data.selected = i" ">{{i}}</div> 
    {{dataService}} 
<div> 

<div ng-controller="Ctrl2 " style="float: right "> 
    Bottom Section 
    <div ng-repeat="i in [1,2,3,4,5] " ng-class="{green: dataService.data.selected==i , red: dataService.data.selected !=i } " 
    ng-click="dataService.data.selected=i ">{{i}}</div> 
    {{dataService}} 
<div> 

代碼

angular.module('app',[]) 
.controller('Ctrl1', function($scope, dataService){ 
    $scope.dataService = dataService; 
}) 
.controller('Ctrl1', function($scope,dataService){ 
    $scope.dataService = dataService; 
}). 
service('dataService', function(){ 
    this.data = {}; 
    this.getData = function(){ 
    return this.data; 
    }; 
    this.setData = function(val){ 
    this.data = val; 
    }; 
}); 

Working Plunkr