Angular scope variable change when route is set?

Question

So I have a controller that is bound to 2 views. In the controller, I want a scope variable set to:

$scope.isOffset = false;

When another view is routed, I want it set to true. My routes in my app.js is set such as:

$routeProvider.when("/claimSub", {
    controller: "claimsController",
    templateUrl: "ppt/views/claims/claimSub.html"
});

$routeProvider.when("/offsetSwipe", {
    controller: "claimsController",
    templateUrl: "ppt/views/swipes/offsetSwipe.html"
});

Both these views also have inputs that are bound to a scope with:

$scope.claimInfo = {
    id: "",
    benefitId: "",
    isSecIns: "",
    isNoResid: "",
    expenseTypeId: "",
    fromDate: "",
    toDate: "",
    provider: "",
    who: "",
    depId: "",
    age: "",
    amount: "",
    comments: "",
    isOffset: "",
};

So making sure that the second route shown above, this 'isOffset' is the same.

I have not used stateProvider, but not sure that this applies here as one view is not a subset of the other.

So trying to figure what I can do here? Seems to me, but I cannot figure out how, the best route would be to change the routing and add some sort of variable or setter to the app.js for the view I want that variable set to true for.

Possible duplicate of Angular.JS: views sharing same controller, model data resets when changing view — Daan van Hulst
– Daan van Hulst, Commented Jan 26, 2016 at 7:34
Thanks @DaanvanHulst - but this is a bit different as the intent is to use one controller for different views. I also have different services too. This controller actually pulls a few services to deal with varying DOM manipulation and page views. — Mark
– Mark, Commented Jan 26, 2016 at 7:41
But the problem you have is the same as the one linked above right? It has two views which use the same controller. And you want to make sure that each view is using the same 'isOffset' variable? Or did I misunderstand the question? — Daan van Hulst
– Daan van Hulst, Commented Jan 26, 2016 at 7:45

georgeawg · Accepted Answer · 2016-01-26 09:26:39Z

3

When the router changes views it destroys the controller and its destroys its scope. It then creates a new scope and instantiates the new controller. It does this even if the new controller is the same as the old controller.

To set a variable based on route, put a resolve function in your routes:

$routeProvider.when("/claimSub", {
    controller: "claimsController",
    templateUrl: "ppt/views/claims/claimSub.html",
    resolve: { isOffset: function() { return false } }
});

$routeProvider.when("/offsetSwipe", {
    controller: "claimsController",
    templateUrl: "ppt/views/swipes/offsetSwipe.html",
    resolve: { isOffset: function() { return true } }
});

Then when your controller starts in the new view:

$scope.isOffset = $scope.$resolve.isOffset;

edited Jan 26, 2016 at 9:26

answered Jan 26, 2016 at 8:35

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

Comments

beaver · Accepted Answer · 2016-01-26 08:54:21Z

2

The "claimsController" controller is instantiated twice, once for claimSub view and another one for offsetSwipe view.

If you need to share data between two view (routes) you can do that with a service, or if you want to share the scope you have to add a parent controller (for example a "mainController" to an element which wraps all the views).

For example use ng-controller="mainController" attached to <body> and in this controller set the variable you need to share between the two views. If you need to know when state (view) changes use $rootScope.$on( "$routeChangeSuccess", ... ).

edited Jan 26, 2016 at 8:54

answered Jan 26, 2016 at 7:33

beaver

17.8k2 gold badges43 silver badges70 bronze badges

4 Comments

Mark Over a year ago

Thanks. The claimsController wraps both these views. So it is 2 views, 1 controller because many functions in the claimsController, is needed for both views. I can use a service, but not sure exactly how I can change that scope variable from false to true based one whether user is at one view or another.

beaver Over a year ago

No, how it is defined you have TWO indipendent instances of "claimsController"; if you want only one instance you could attach it to a "parent" HTML element (i.e. body) and remove from $routeProvider.

Mark Over a year ago

Not sure I am following. Can you show what you are referring to?

beaver Over a year ago

For example use ng-controller="mainController" attached to <body> and in this controller set the variable you need to share between the two views. If you need to know when state (view) changes use $rootScope.$on( "$routeChangeSuccess", ... )

Nora · Accepted Answer · 2016-01-26 07:54:18Z

1

You can try getting the current page with $location.path() and then you can set isOffset accordingly $scope.isOffset = currentPage === 'claimSub';

answered Jan 26, 2016 at 7:54

Nora

3,2812 gold badges23 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular scope variable change when route is set?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related