1

ポップアップ ngDialog (astore.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

ダイアログはグリッドなしで表示されます。実際に機能させるには、コントローラーでのように、ngDialog が開かれるまで、ダイアログでの w2grid の作成を延期する必要があります。

$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