Question

我正在开发一个应用程序，它在页面上使用多个（但类似的）控制器（controllerA）和另一个可能会改变某些属性的控制器（controllerB），但仅限于controllerA之前已被选中。

（在controllerA中，某些属性可以有默认值，通过使用数据属性传递和应用）

在这个阶段，我只能用controllerB修改最后一个颜色属性（这是有道理的，因为这是活动范围。我的问题是，如何将controllerB范围更改为“活动”范围 - 所选controllerA的副本？

// Code goes here

var webApp = angular.module("webApp", []);

webApp.controller("controllerA", function($scope, $rootScope, $element, styleFactory){
$scope.selected = false;
var color = angular.element($element[0]).attr("data-style-color");
styleFactory.setColor(color);  
$scope.data = styleFactory.getData();

$scope.select = function(){
  $scope.selected = !$scope.selected;
}
});

webApp.controller("controllerB", function($scope, $rootScope, $element, styleFactory){
  $scope.data = styleFactory.getData();
});

webApp.factory("styleFactory", function(){
  var data = {"style":"color:yellow"}

  return {
    setColor: function(color){
      data = {"style":"color:"+color};
    },
    getData: function(){
      return data;
    }
  };
});

完整示例： http://plnkr.co/edit/He2m7ArfRSur9Igq2eur?p=preview

感谢， --iM

Answer 1

您可以看到修改后的plnkr按照您所描述的here工作。

就个人而言，我会重新构建应用程序的体系结构并重新考虑styleFactory实现。

有些想法：

data = {"style":"color:"+color}会替换整个数据对象，因此$scope.data = styleFactory.getData()仅适用于最后一个controllerA，因为所有其他人的参考都会丢失。
尝试创建一个位于controllerA和controllerB之上的父控制器。
尝试使用指令解决此问题。

Angular中类似控制器的独立范围

1 个答案: