在具有相同ng控制器的DOM元素之間共享$ scope

Question

我被某些東西卡住了（我一直在閱讀類似的問題，但是沒有人會讓我看到解決方案）。 我有2個DOM元素（讓我們說2 div）與不同的id，但相同的ng控制器（這是基本的例子，在我的真實應用程序，我有2個不同的頁面，但工作原理相同）。

<div id="layer1" ng-controller="appCtrl"> 
    <select ng-model="selectedType" ng-options="type.label for type in ptype track by type.value" ng-change="changeType(selectedType.value)"></select> 
</div> 
<div id="layer2" ng-controller="appCtrl"> 
    <select ng-model="selectedType" ng-options="type.label for type in ptype track by type.value" ng-change="changeType(selectedType.value)"></select> 
</div> 

而且在JS

var myAppModule = angular.module('myApp', []) 
.factory('selectedType', function(){ 
    return{} 
}) 
.controller('appCtrl', ['$scope',function($scope){ 
    $scope.ptype = [ 
    { 
     value: 1, 
     label:'Kg' 
    }, 
    { 
     value: 2, 
     label:'Pza' 
    }]; 
    selectedType = $scope.ptype[0]; 
    $scope.changeType = function(value){ 
    if(value==1){selectedType = $scope.ptype[0];} 
    else{selectedType=$scope.ptype[1];} 
    }; 
}]) 

正如你可以看到我對SELECT和NG-模式的選項，我需要的是，當改變任何SELECT（選擇的值不另一方面DIV）另一方得到更新。

這裏是代碼爲SEE HERE的Plunker。 謝謝！

Answer 1

使用像你嘗試共享服務：

你的好辦法，但你只是忘記了：

1 - 您使用NG-模型的範圍，

2 - 至具有2個數據工廠結合，

• 綁定工廠本身的範圍，
• 並使用在工廠內的項目不工廠本身（例如：數據）。

代碼：

.factory('selectedType', function(){ 
    return { 
    data: {} // <---- We use 'data' here for example 
    } 
}) 

和現在控制器：

.controller('appCtrl', ['$scope', 'selectedType',function($scope, selectedType) { 
    $scope.selectedType = selectedType; // <-- Not the selectedType.data (Important) 
    /* but the factory object */ 
    $scope.ptype = [ 
     { 
     value: 1, 
     label:'Kg' 
     }, 
     { 
     value: 2, 
     label:'Pza' 
     }]; 
    $scope.selectedType.data = $scope.ptype[0]; 
}) 

現在我們不需要的NG-變化都：

<div id="layer1" ng-controller="appCtrl"> 
    <select ng-model="selectedType" ng-options="type.label for type in ptype track by type.value"></select> 
</div> 
<div id="layer2" ng-controller="appCtrl"> 
    <select ng-model="selectedType" ng-options="type.label for type in ptype track by type.value"></select> 
</div> 

plunker：https://plnkr.co/edit/5qg45F?p=preview

注意：您可以使用$ rootScope或$ scope。$ parent來代替使用共享服務。