How to use Angular $scope.variable from controller 1 in ng-class of div using controller 2

Question

I have 2 controllers boxController.js and homeController.js. On box.html page I initialize the boxController.js. Now, I need to use ng-class on box.html page but the variable I need to use inside ng-class is in homeController.js

I have tried service and factories but these return variables that can be shared across multiple controllers. I am somehow confused about using a shared variable inside html, not inside the controller.

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

ChickenSoups · Accepted Answer · 2019-09-14 08:10:25Z

0

You have some ways to do that

use $rootScope
use $watch
create a shared context using factory

answered Sep 14, 2019 at 8:10

ChickenSoups

9858 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jazib · Accepted Answer · 2019-09-14 10:40:50Z

0

Just adding to @ChickenSoups' answer you can also use $on and $broadcast. you would do this in the 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});

}

and in your boxController.js you can catch this event like the following:

$scope.$on('some-event', function(event, args) {

    $scope.defaultState = args.defaultState;
    $scope.submitNow = args.submitNow;

});

answered Sep 14, 2019 at 10:40

Jazib

1,37914 silver badges27 bronze badges

5 Comments

wibwaj Over a year ago

Thanks! I got it working but there's an unusual problem .Do you have any idea why this happens and how this can be fixed? The default ng class works fine as in it adds 'two column grid' in the right order but on the or condition it doesn't add the classes in the right order. one column grid Is added as ... column grid one

Jazib Over a year ago

@wibwaj Just so you know my superpower is answering questions with the detail of the issue and not telepathy. so if you could also tell me what the unusual problem is, that would be great and I will be able to help you.

wibwaj Over a year ago

Lol sorry I hit enter for line break but that submitted my text. I eventually updated my post. Please check again!

Jazib Over a year ago

@wibwaj I don't see an OR condition anywhere in your code ? what are you trying to achieve? (Also I would suggest that you close this question and create another question with your current problem as this question is not related to the current problem)

wibwaj Over a year ago

done! Can you check this out? stackoverflow.com/questions/57935040/…

Collectives™ on Stack Overflow

How to use Angular $scope.variable from controller 1 in ng-class of div using controller 2

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related