Home AngularJS $scope variable loses value after $rootscope.$on function executes
Reply: 0

AngularJS $scope variable loses value after $rootscope.$on function executes

user3327 Published in April 25, 2018, 8:21 pm

I have an AngularJS single-page application. We display a list of items in a table and users can drill-down to view the detail for a specific item. Some items have child items that can be drilled down as well. To visualize this consider a list of customers that can be drilled down to view customer detail. Each customer may have a list of orders and we can drill down to view order details.

This is the hierarchy of the data flow:

List of customers -> customer detail -> list of customer orders -> order detail

I have no trouble drilling down through this hierarchy but our users have requested "breadcrumbs" to be able to go back to an item's parent, for example, to be able to jump between a specific customer's order detail to the customer detail view.

This being a single-page application has made this a bit tricky but I have come up with a design which I thought would work but I'm having a bit of trouble with it. I'll spare you the gory details of how I am attempting to do that but the root of the problem is I need to pass data from the main view to the child view. I am using $rootscope.$broadcast to do this.

It all boils down to this. I can use the $rootscope.$on function to listen for the event raised by the $rootscope.$broadcast function and grab the data, in this case is that I want to view the detail for customer XYZ. However, I also need to perform some initialization in the child controller's "setup" function which is triggered by calling $(document).ready(setup); When I place a breakpoint in my code it seems that the $rootscope.$on function executes before the setup function executes. To attempt to get around this I tried setting storing that value as $scope.customerID $on function and reading that value in my setup function. For some reason $scope.customerID is undefined when I attempt to read the value. As a result, the "showDetail" function never executes.

MainController code:

function navigate(viewTemplate, itemID) {
    $scope.activeViewTemplate = viewTemplate; // Switches views specified by ng-include
    // (e.g. viewTemplate = 'customers.html', itemID = 12345)

    // If itemID is specified, show detail for that item
    if (itemID)
        $rootscope.$broadcast('viewDetail', { id: itemID });

CustomersController code:

// Calls the setup function when the view loads

// Attach the event handler for the viewDetail event
$rootscope.$on('viewDetail', viewDetail);

// Handle the viewDetail event
function viewDetail(event, data) {
    if (data)
        $scope.customerID = data.id; // <-- Debugger shows this has a value

// Perform initialization and display customer detail of customerID is specified
function setup() {
  // initialization code goes here
  if ($scope.customerID) // <-- Always undefined!

Sorry if this is a bit complex. Basically I need to figure out why $scope.customerID doesn't retain it's value between the "viewDetail" and "setup". I've checked the rest of the code in my Customers controller and $scope.customerID isn't being set/cleared anywhere else. If I can't get this figured out I'll need to scrap my design and come up with something else.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.308031 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO