Question

我坚持不懈（我一直在阅读类似的问题，但没有一个让我接受解决方案）。我有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>

在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-model的选项，我需要的是在任何SELECT中更改所选值（无论哪个DIV）另一个也更新。

这是一个代码为SEE HERE的Plunker。谢谢！

Answer 1

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

你很好，但你忘记了：

1 - 您使用ng-model中的范围，

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-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

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

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

1 个答案: