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](http://stackoverflow.com/questions/16210822/angular-js-views-sharing-same-controller-model-data-resets-when-changing-view) — Daan van Hulst, Jan 26 '16 at 07: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, Jan 26 '16 at 07: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, Jan 26 '16 at 07:45

georgeawg · Answer 1 · 2016-01-26T09:26:39.157

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;

beaver · Answer 2 · 2016-01-26T08:54:21.080

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 '16 at 08:54

answered Jan 26 '16 at 07:33

beaver

17,333
2
40
66

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. – Mark Jan 26 '16 at 07:37
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. – beaver Jan 26 '16 at 07:41
Not sure I am following. Can you show what you are referring to? – Mark Jan 26 '16 at 07:42
For example use `ng-controller="mainController"` attached to `` 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", ... )` – beaver Jan 26 '16 at 07:53

score 1 · Answer 3 · answered Jan 26 '16 at 07:54

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 '16 at 07:54

Nora

3,093
2
20
22

Angular scope variable change when route is set?

3 Answers3