如何使用控制器 2 在 div 的 ng 类中从控制器 1 中使用角度 $scope.变量

Question

我有 2 个控制器 boxController.js 和 homeController.js。在 box.html 页面上，我初始化了 boxController.js。现在，我需要在 box.html 页面上使用 ng-class，但我需要在 ng-class 中使用的变量在 homeController 中.js

我尝试过服务和工厂，但这些返回变量可以在多个控制器之间共享。我对在 html 内部而不是在控制器中使用共享变量感到困惑。

**** homeController.js ****
$scope.defaultState = false;
$scope.submitNow = false;
$scope.default = function () {
$scope.defaultState = !$scope.defaultState
}
$scope.defaultToggle = function () {
$scope.submitNow = !$scope.submitNow
}
**** box.html (This page uses boxController.js, not homeController.js) ****

// I need to use $scope.submitNow and $scope.defaultState variables in the ng-class of this div
<div ng-controller="boxController" class="ui" ng-class="{'two.column.grid' : submitNow, 'one.column.grid' : defaultState}">
</div>

Answer 1

你有一些方法可以做到这一点

1. 使用$rootScope
2. 使用$watch
3. 使用工厂创建共享上下文

Answer 2

只需添加到@ChickenSoups的答案中，您还可以使用$on和$broadcast。 你会在homeController.js这样做

$scope.defaultState = false;
$scope.submitNow = false;

$scope.default = function () {
$scope.defaultState = !$scope.defaultState;
$rootScope.$broadcast('some-event', { defaultState: $scope.defaultState, submitNow:  $scope.submitNow});
}
$scope.defaultToggle = function () {
$scope.submitNow = !$scope.submitNow;
$rootScope.$broadcast('some-event', { defaultState: $scope.defaultState, submitNow:  $scope.submitNow});
}

在您的boxController.js中，您可以像下面这样捕获此事件：

$scope.$on('some-event', function(event, args) {
$scope.defaultState = args.defaultState;
$scope.submitNow = args.submitNow;
});