Jquery 在NGO对话框中使用w2grid

我们试图理解为什么在弹出的ngDialog（比如eastore.github.io/ngDialog）中使用w2grid（w2.com）需要与在普通页面中使用不同的代码。我们使用的是角度1.4.8

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

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

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

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

这个很好用。页面上出现了网格

在其他地方，我们希望弹出一个带有网格的模式对话框。对话框的模板同样在对话框控制器的div内有一个网格的div：

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

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

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

与上述类似，如果对话框的控制器（PopupElectreTailer）仅执行以下操作：

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

此时将显示对话框，其中没有网格。要使其真正起作用，我们必须推迟在对话框中创建w2grid，直到打开ngDialog之后，就像在控制器中一样：

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

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

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

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

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

然而，在ngDialog中，控制器构造函数似乎在为网格保留的div在DOM中之前运行，因此jquery无法找到并替换为w2grid。相反，我们必须等到ngDialog.open完成，此时模板已完全加载

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

---

如何解释操作顺序上的差异？对于ngDialog，这是一件必须“了解”的事情，还是有一个更广泛的原则在起作用？

console.log（$（''gridSelectRetailer'）.length）的输出是什么？如果是

0

您还不能访问DOM元素。这就是问题所在，不是吗？为什么当ngDialog加载模板时，我们不能访问DOM元素，而当它是“普通”页面时，我们可以访问DOM元素呢？

console.log（$（'#gridSelectRetailer'）.length）

output有什么作用？如果是

0

您还不能访问DOM元素。这就是问题所在，不是吗？为什么当ngDialog加载模板时，我们不能访问DOM元素，而当它是“普通”页面时，我们可以访问DOM元素？