1

我们试图理解为什么在弹出 ngDialog (likeastore.github.io/ngDialog) 中使用 w2grid (w2.com) 需要与在普通页面中使用不同的代码。我们正在使用 Angular 1.4.8。

在普通页面 HTML 中，我们在指定控制器的 div 中为 w2grid 保留一个 div：

<div data-ng-controller="CtrlViewEdit" >
  <div id="gridViewEdit" style="width:1500px; height:800px; display:none;" ></div>
</div>

在 CtrlViewEdit 控制器构造函数中，我们找到 div 并在其上构造一个 w2grid：

$('#gridViewEdit').w2grid({name:'gridViewEdit', ...etc

这工作正常。该页面上带有网格。

在其他地方，我们想弹出一个带有网格的模态对话框。对话框的模板类似地在对话框控制器的 div 内有一个网格 div：

<div data-ng-controller="PopupSelectRetailer" >
  <input ng-model="searchName" />

  <div id="gridSelectRetailer" style="width:750px; height:500px; display:block;" ></div>

  <br /><br />
  {{searchName}}

  <div class="ngdialog-buttons">
    <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">Close</button>
  </div>

</div>

这个模板（PopupSelectRetailer.html）以如下代码传递给 ngDialog.open：

  var myScope = $scope.$new();

  ngDialog.open(
  {
    width: 1000,
    template: "PopupSelectRetailer.html",
    className: 'ngdialog-theme-default',
    closeByDocument:false,
    showClose: false,
    scope: myScope
  });

如果与上述类似，对话框 (PopupSelectRetailer) 的控制器只需执行以下操作：

$('#gridSelectRetailer').w2grid({name: 'gridSelectRetailer', ...etc

对话框出现时没有网格。为了真正让它工作，我们必须推迟在对话框中创建 w2grid，直到打开 ngDialog 之后，就像在控制器中一样：

$scope.$on('ngDialog.opened', InitializeNonAngular);

  function InitializeNonAngular() 
  {
    $('#gridSelectRetailer').w2grid({name: 'gridSelectRetailer', ...etc

我们的问题是“为什么？” 为什么 Angular 正常加载模板与在 ngDialog 中加载模板之间存在差异？

在我们看来，在正常情况下，为网格保留的 div 在控制器构造函数运行时位于 DOM 中，因此 jquery 可以在那时找到它并用 w2grid 替换它。

而在 ngDialog 的情况下，控制器构造函数似乎在为网格保留的 div 位于 DOM之前运行，因此 jquery 没有任何东西可以查找和替换为 w2grid。相反，我们必须等到 ngDialog.open 完成，此时模板已完全加载。

然而，在 ngDialog 的情况下，模板至少已部分加载，否则控制器构造函数根本不会运行 - 它指定的唯一位置是在模板中！

是什么解释了操作顺序上的这种差异？这是人们必须“了解” ngDialog 的事情，还是有更广泛的原则在起作用？

4

0 回答 0