如何在 Angular-UI-Router 中的所有命名视图中更新作用域变量答案

【问题标题】：How to update scoped variable across all named views in Angular-UI-Router如何在 Angular-UI-Router 中的所有命名视图中更新作用域变量
【发布时间】：2014-12-10 03:03:31
【问题描述】：

以下 plunker 可能更好地描述了我面临的问题： http://plnkr.co/edit/y7BMdyRhj2WvFXq0UUud?p=preview

我想更改resAVal 变量的值，它是所有命名视图A、B 和C 中的一个$rootScope 变量。所有命名视图都由同一个控制器 MainCtrl 管理。

resAVal 可以在命名视图 A 中更新。

我只需要以某种方式在所有命名视图中更新resAVal 变量，它不必是$rootScope 变量。

有人可以帮我吗？

【问题讨论】：

不是使用控制器将每个视图写入指令，而是将变量移动到服务并将服务注入每个指令。现在你的观点高度耦合。
@Avraam：是否不可能在当前系统中的所有命名视图中更新resAVal？
我看不出为什么要实现它。我会写一个答案解释。
@Avraam：我正在使用现有系统及其控制器和命名视图中的大量代码。我需要根据是否选中复选框进行过滤。现在的问题是，复选框部分显示在与显示该过滤器结果的部分不同的视图中，这取决于是否选中了复选框。对于过滤，我需要检查复选框的值。 ng-model 复选框为 resAVal。所以，就像我需要在给定的 plunker 中查看 B 中的 resAVal 值，同时在视图 A 中更新它。

标签： javascript html angularjs uiview angular-ui-router

【解决方案1】：

这是一个有效的http://plnkr.co/edit/5Ut80w4dhO6IQmSSlx6f?p=preview

我会这样写：

app.directive('aview',['FruitService', function(FruitService){
  return {
     templateUrl: 'a.html',
     restrict: 'C',
     link: function($scope){
       $scope.resAVal = FruitService.resAVal;
     }
  }
}
]);

app.directive('bview',['FruitService', function(FruitService){
  return {
     templateUrl: 'b.html',
     restrict: 'C',
     link: function($scope){
       $scope.resAVal = FruitService.resAVal;
     }
  }
}
]);

app.directive('cview',['FruitService', function(FruitService){
  return {
     templateUrl: 'c.html',
     restrict: 'C',
     link: function($scope){
       $scope.resAVal = FruitService.resAVal;
     }
  }
}
]);

app.factory('FruitService', function(){
  return { resAVal : 5 }
});

实际上你甚至不必在每个指令中都做$scope.resAVal = FruitService.resAVal;，你可以在工厂里做$scope.resAVal=yourvalue，然后在每个指令中注入工厂

【讨论】：

你绝对成功了！光彩照人。谢谢:)
@skip 希望对您有所帮助；）