Kendo UI AngularJs网格指令，未定义

Question

在票证输入页面中，我有一个主ticketEntry.html页面，其中包含一个用于行的网格和一个用于支付的网格。

加载ticketEntry.html时，它必须首先检索票证视图模型(通过对Web的ajax调用)。在收到票证视图模型之前，行和支付网格无法检索它们的数据。

在我的当前解决方案中，我必须在控制器中使用$timeout才能使ticketEntry.html工作。我正在寻找一种更清洁的方法。。

TicketEntry.html的摘录：

<div ng-controller="ticketLineController">
    <div id="ticketLineGridDiv" kendo-grid="ticketLineGrid" k-options="ticketLineGridOptions"></div>
</div>
...
<div ng-controller="ticketPaymentController">
    <div id="ticketPaymentGridDiv" kendo-grid="ticketPaymentGrid" k-options="ticketPaymentGridOptions"></div>
</div> 

在ticketEntry.html的控制器中，我有以下内容：

$timeout(function () {
    ticketService.getTicket(ticketId).then(
        function(ticket) {
            $scope.initPos(ticket);
        },
        ...);
}, 500);

$scope.initPos = function(ticket) {
    $scope.ticket = ticket;   <-- $scope.ticket is used by the line and payment grid
    $scope.$broadcast('PosReady');  <-- Tell the payment and line controllers to load their grids
}

如您所见，我正在使用$timeout延迟500 As，然后我得到票证视图模型，并广播到线路和支付控制器，他们现在可以加载他们的网格。

下面是行控制器中的侦听器：

$scope.$on('PosReady', function (event) {
    $scope.ticketLineGrid.setDataSource(getGridDataSource());
    $scope.ticketLineGrid.dataSource.read(); 
});

问题是，如果我在入场券控制器中不使用$timeout，有时$scope.ticketLineGrid在这里是没有定义的(与支付控制器相同)。

我尝试在票据输入控制器中使用angular.element(document).ready(function () {.})而不是$timeout，但这没有解决问题。

如何知道何时创建/定义了$scope.ticketLineGrid (例如)？

，处理这种情况的正确方法是什么？

更新9/27/2014，以提供关于如何初始化票务行网格的更多数据：

在ticketEntry.html中的AngularJs指令中，k选项指定网格的定义对象：

<div id="ticketLineGridDiv" kendo-grid="ticketLineGrid" k-options="ticketLineGridOptions"></div>

ticketPaymentGridOptions只是一个具有定义网格的属性的对象：

$scope.ticketPaymentGridOptions = {
  autoBind: false,
  height: 143,
  columns: [
    {
        field: "payCode", title: "PayCode",
    },
    {
        field: "amount", title: "Amount", format: "{0:n2}", attributes: { style: "text-align:right" },
    },
  ],
  pageable: false,
  ...
};

更新9/29/2014:这是我根据Valentin的建议提出的解决方案

我使用了两只手表--一只在ticketLineGrid所在的子范围内：

$scope.$watch('ticketLineGrid', function (newVal) {
  if (angular.isDefined(newVal)) {
    $scope.ticketControl.lineGridReady = true;
  }
});

一旦初始化了网格，此手表就会设置父属性$scope.ticketControl.lineGridReady = true。

父级(ticketEntryController)有用于lineGridReady的手表：

$scope.$watch('ticketControl.lineGridReady', function (gridReady) {
  if (gridReady) {
    $scope.loadPage();
  }
});

$scope.loadPage = function () {
  ticketService.getTicket(ticketId).then(
    function (ticket) {
      $scope.initPos(ticket);
    }
    ...
}

没有我想要的那么干净，但肯定比使用$timeout更好.

Answer 1

我如何知道何时创建/定义了$scope.ticketLineGrid (例如)？

您可以使用$scope.$watch语句：

$scope.$watch('ticketLineGrid', function (newVal, oldVal) {
  if(angular.isDefined(newVal)){
    // do something with it
  }
})

但是，在我看来，这样做的好方法不是从scope属性检索数据，而是从承诺检索数据。在这方面，我只会用承诺而不使用任何事件：

var ticketPromise = ticketService.getTicket(ticketId);

ticketPromise.then(function (ticket) {
  $scope.ticket = ticket;
});

// you know that part better than I do
var ticketLineGridPromise = ...;

$q.all([ticketPromise, ticketLineGridPromise])
  .then(function (realizations) {
    var ticket = realizations[0], ticketLineGrid = realizations[1];

    $scope.ticketLineGrid.setDataSource(getGridDataSource());
    $scope.ticketLineGrid.dataSource.read();
  })

我不能说得更精确，因为从您的代码中还不清楚是什么初始化了ticketLineGrid。

最后，在很多情况下，在路由声明中使用resolve子句非常方便。