如何使用控制器 2 在 div 的 ng 类中使用控制器 1 中的 Angular $scope.variable

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;

});