Question

我有一个AngularJS单页面应用程序。我们在表格中显示项目列表，用户可以向下钻取以查看特定项目的详细信息。有些物品也有可以钻下来的儿童用品。要想象这一点，请考虑可以深入查看客户详细信息的客户列表。每个客户可能都有一个订单列表，我们可以深入查看订单详细信息。

这是数据流的层次结构：

客户列表 - ＆gt;客户详细信息 - ＆gt;客户订单列表 - ＆gt;订单详情

我可以毫不费力地浏览这个层次结构，但是我们的用户已经请求了＃34; breadcrumbs＆＃34;例如，能够返回到项目的父级，以便能够在特定客户的订单详细信息之间跳转到客户详细信息视图。

这是一个单页应用程序使这有点棘手，但我想出了一个我认为可行的设计，但我遇到了一些麻烦。我将为您提供有关我如何尝试这样做的详细信息，但问题的根源是我需要将数据从主视图传递到子视图。我正在使用$ rootscope。$ broadcast来做到这一点。

这一切归结为此。我可以使用$ rootscope。$ on函数来监听$ rootscope引发的事件。$ broadcast函数并获取数据，在这种情况下我想查看客户XYZ的详细信息。但是，我还需要在子控制器＆＃34;设置＆＃34;中执行一些初始化。通过调用$（document）.ready（setup）触发的函数;当我在我的代码中放置断点时，似乎$ rootscope。$ on函数在执行setup函数之前执行。为了试图解决这个问题，我尝试将该值存储为函数上的$ scope.customerID $并在我的setup函数中读取该值。出于某种原因，当我尝试读取值时，$ scope.customerID未定义。结果，＆＃34; showDetail＆＃34;功能永远不会执行。

MainController代码：

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代码：

// Calls the setup function when the view loads
$(document).ready(setup);

// 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!
    showDetail($scope.customerID);
}

很抱歉，如果这有点复杂。基本上我需要弄清楚为什么$ scope.customerID不会在＆＃34; viewDetail＆＃34;之间保留它的价值。和＆＃34;设置＆＃34;。我已经检查了我的Customers控制器中的其余代码，并且$ scope.customerID未在其他任何地方设置/清除。如果我无法理解这一点，我将需要废弃我的设计并想出其他的东西。

AngularJS $ scope变量在$ rootscope之后丢失值。$ on函数执行

0 个答案: