同じng-controllerを持つDOM要素間で$スコープを共有

Question

私は何かに悩まされています（私は同様の質問を読んできましたが、どれも解決策にはなりません）。 私は2つのDOM要素を持っています（実際には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を持つプランカ。 ありがとう！

Answer 1

あなたの試みなどの共有サービスを使用して：あなたは良い方法であるが、あなただけのことを忘れてしまった

を：

1 -

2を、あなたはNG-モデルにスコープを使用し

- に2つのウェイ工場のデータバインディング、

• バインド範囲に工場自体、
• 及び使用工場内のアイテムを持っていません工場自体（例：データ）。

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

  となりましコントローラで：

  <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

  .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-変更を必要といけないコード

NB：共有サービスを使用する代わりに、$ rootScopeまたは$ scope。$ parentを使用することもできます。