AngularJS Passing scope to different page with same controller

Question

I have a locations page that does some stuff and when the end user clicks on a location it will then go to a new page. Im trying to pass some data to the new page using the same controller and scope but on the new page its dropping the scope?

HTML:

<h3 class="fc-primary" ng-click="canvasLocation(location.id)"><a href="/about-us/location">{{location.id}}</a></h3>

Angular Controller:

$scope.canvasLocation = function(locationId) {
                    angular.forEach($scope.model.canvasLocations.response.locations,
                        function(value) {
                            if (value.id === locationId ) {
                                $scope.model.canvasLocationData.push(value);
                                var tempArry = [];
                                tempArry.push(value.institutionName);
                                tempArry.push(value.latitude);
                                tempArry.push(value.longitude);
                                tempArry.push(value.mondayOpen);
                                tempArry.push(value.mondayClose);
                                tempArry.push(value.tuesdayOpen);
                                tempArry.push(value.tuesdayClose);
                                tempArry.push(value.wednesdayOpen);
                                tempArry.push(value.wednesdayClose);
                                tempArry.push(value.thursdayOpen);
                                tempArry.push(value.thursdayClose);
                                tempArry.push(value.fridayOpen);
                                tempArry.push(value.fridayClose);
                                tempArry.push(value.saturdayOpen);
                                tempArry.push(value.saturdayClose);
                                tempArry.push(value.sundayOpen);
                                tempArry.push(value.sundayClose);
                            }
                        });
                };

when I try to access $scope.model.canvasLocationData its returning [] on the new page?

Patrick · Accepted Answer · 2019-01-07 20:05:35Z

2

You are leaving the page where the scope has been defined and it is no longer available when the new page loads up. You have a couple of options:

Create a new view on the existing page to show the /about-us/location content. This would probably be the recommended approach as angularjs is a framework for single page applications (SPA).
You need a way to pass state to the receiving page (about-us/location) so that you can rebuild the scope there. If you can rehydrate locations from a location id on the receiving page, that might be as simple as doing a (about-us/location?id=1234 or a URL based on resource: about-us/location/1234). Your choice here is probably dependent on your middleware technology (.NET, Java, Express, etc.). Once on the new page, you can parse the URL to get the location id to make an AJAX/XHR/$http request for the info.

Here is the URL for ui-router, which would be helpful for the first bullet. It would be harder to recommend a more directed approach with the second option (new page), without knowing what middle tier or technology you are using to serve the content.

https://github.com/angular-ui/ui-router

answered Jan 7, 2019 at 20:05

Patrick

6,9783 gold badges25 silver badges31 bronze badges

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

2 Comments

Charles L. Over a year ago

i like this idea, the second bullet point. However how would one go about grabbing the ID from /1234. We use ASP.NET as the backend so routing is done with C# so i would need a way to grab this from the URL inside the controller

Patrick Over a year ago

You can look at some documentation how to configure custom routes for ASP.NET webforms (which is what I'm assuming you are using): learn.microsoft.com/en-us/aspnet/web-forms/overview/… If already using MVC, this would be easier as I think the scaffolded project would have examples setup for you.

Collectives™ on Stack Overflow

AngularJS Passing scope to different page with same controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related