通过相同的ng-controller共享DOM元素之间的$范围

Question

我遇到了一些东西（我一直在阅读类似的问题，但没有一个让我进入解决方案）。我有2个带有不同ID的DOM元素（例如2 Div），但具有相同的ng-controller（这是基本示例，在我的真实应用中，我有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];}
  };
}])

您可以看到，我有选择和NG模型的选项，当在任何选择中更改选定值（不重要的哪个Div）时，我需要的是，对方也会更新。

这里有一个带代码的plunker，请参见此处。谢谢！

Answer 1

使用像您的尝试这样的共享服务：

您的表现不错，但您只是忘记了：

1-您在ng模型中使用范围，

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

nb：您也可以使用$ rootscope或$ scope而不是使用共享服务。$ parent。