javascript - Angular scope variable change when route is set? - Stack Overflow

admin管理员组

文章数量:1391977

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: "",
    ments: "",
    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.

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: "",
    ments: "",
    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.

• javascript
• angularjs
• routes

Share Improve this question Follow edited Jan 26, 2016 at 7:49 Mark asked Jan 26, 2016 at 7:26 MarkMark 1,87244 gold badges3131 silver badges5454 bronze badges 3

• Possible duplicate of Angular.JS: views sharing same controller, model data resets when changing view – 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 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 Commented Jan 26, 2016 at 7:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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;

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

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

本文标签： javascriptAngular scope variable change when route is setStack Overflow