Question

我们试图理解为什么在弹出窗口中使用w2grid（w2.com）ngDialog（likeastore.github.io/ngDialog）需要的代码与在普通页面中使用的代码不同。我们正在使用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的东西，还是有更广泛的原则在起作用？

在ngDialog

0 个答案: