AngularJS モーダル ボックス テンプレート ngDialog の使用方法

今回はAngularJSモーダルボックステンプレートngDialogの使い方と、AngularJSモーダルボックステンプレートngDialogを使用する際の注意点

を実際の事例を交えて紹介します。

プロジェクトが開始されたとき、私たちが使用したダイアログ ボックスは AngularJS の $modal モーダル ボックスでしたが、後で、$modal によって開かれたダイアログ ボックスがページに対して静的であることがわかりました。ダイアログ ボックスが非常に長いフォームの場合、エクスペリエンスは同じではありません。$scope を渡すときに $modal があまり柔軟性がないという理由もあります。そのため、後で $ngDialog に切り替えました。

公式 API はこちらです:https://

www.npmjs.com/package/ng-dialog

まず、$ngDialog に必要な 関連ファイル

がプロジェクトにインストールされていることを確認してください。

次の簡単なデモ

del.html の内容は次のとおりです。これはダイアログ ボックスの内容です。ここでは比較的単純で、確認ダイアログ ボックスだけです

<meta charset="UTF-8"> 
<p class="modal-header"> 
 <h4 class="modal-title">删除</h4> 
</p> 
 
<p class="modal-body"> 
 <form autocomplete="off" class="file-brief file-brief-show form-validation" name="ObsForm" id="form-new-style"> 
  <p class="col-sm-12 m-t-xs m-b-xs "> 
   <p class="form-group"> 
    <label>您确认要删除吗?</label> 
   </p> 
  </p> 
 </form> 
</p> 
<p class="modal-footer"> 
 <button type="submit" class="btn" ng-click="confirm()" >确定</button> 
 <button type="button" class="btn" ng-click="cancel()">取消</button> 
</p>

コントローラーにメソッドを追加します:

$scope.del = function () { 
   ngDialog.open({ 
    template: '/del.html', 
    className: 'ngdialog-theme-default', 
    scope: $scope, 
    controller: function ($scope) { 
    ... 
     $scope.confirm = function () { 
     ... 
     }; 
     $scope.cancel = function () { 
      $scope.closeThisDialog(); 
     }; 
    } 
   }); 
};

こちら。実際、ダイアログ ボックスが単純な場合は、プレーン: true,

という属性を追加するだけで済みます。ボックスはカスタマイズ可能、幅: 500、/ /絶対幅。または width:'%50' //相対幅

上記 2 点の例:

$scope.delBucket = function () { 
   ngDialog.open({ 
    template: '<p class="modal-header"><h4 class="modal-title">删除Bucket</h4></p>' + 
    '<p class="modal-footer"><button type="submit" class="btn" ng-click="confirm()" >确定</button>'+ 
       '<button type="button" class="btn" ng-click="cancel()">取消</button></p>', 
  plain:true, 
    className: 'ngdialog-theme-default', 
  width:600, 
    scope: $scope, 
    controller: function ($scope) { 
    ... 
     $scope.confirm = function () { 
     ... 
     }; 
     $scope.cancel = function () { 
      $scope.closeThisDialog(); 
     }; 
    } 
   }); 
  };

上記は単なる例であり、公式ドキュメントには ID でダイアログ ボックスを開くこと、確認を開くことに関する詳細も記載されています。ダイアログボックスなど。

基本的に公式 API を翻訳する $ngDialog を紹介する非常に詳細な記事もあります。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Node.jsの操作方法とダイアログボックスngDialogの使用方法

Angularの操作方法と動的読み込みコンポーネントメソッドを使用してDialogを実装する方法

🎜

以上がAngularJS モーダル ボックス テンプレート ngDialog の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。