使用相同的ng-controller在DOM元素之间共享$ scope

I'm stuck with something (I've been reading similar questions but none of them get me to the solution). I have 2 DOM elements (let's say 2 div's) with different id's but the same ng-controller (this is for basic example, in my real app I have 2 differente pages but works the same).

我遇到了一些问题（我一直在阅读类似的问题，但没有一个让我接受解决方案）。我有2个DOM元素（比如2个div），它们具有不同的id但是相同的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>

And in JS

在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];}
  };
}])

As you can see I have the options for the SELECT and the ng-model, what I need is when change the selected value in any SELECT (doesn't matter which DIV) the other gets updated too.

正如您所看到的，我有SELECT和ng-model的选项，我需要的是在任何SELECT中更改所选值（无论哪个DIV）另一个也更新。

Here a Plunker with code SEE HERE. Thanks!

这里有一个代码的Plunker SEE HERE。谢谢！

1 个解决方案

#1

Using a Shared service like your attempt:

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

you are in the good way but you just forgot that :

你很好，但你忘记了：

1 - you use the scope in ng-model,

1 - 你在ng-model中使用范围，

2 - to have 2 way data binding for factory,

2 - 为工厂提供双向数据绑定，

bind the factory itself to a scope,
将工厂本身绑定到范围，
and use an item inside the factory not the factory itself (eg: data).
并使用工厂内的物品而不是工厂本身（例如：数据）。

code:

码：

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

and in the controller now:

现在在控制器中：

.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];
})

Now we dont need the ng-change at all:

现在我们根本不需要ng-change：

<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

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

NB: Instead of using shared service, you can also use $rootScope or $scope.$parent for that.

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

#1