CODEWITHSUNDEEP
javascriptangularjsroutes
Mark
Mark

Reputation: 1872

Angular scope variable change when route is set?

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.

Upvotes: 3

Views: 4355

Answers (3)

georgeawg
georgeawg

Reputation: 48968

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;

Upvotes: 3

beaver
beaver

Reputation: 17647

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", ... ).

Upvotes: 2

Nora
Nora

Reputation: 3261

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

Upvotes: 1

Related Questions