今回は 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 Expressのインストールと使用手順の詳細な説明
nodeフロントエンド開発テンプレートエンジンJadeの使用手順の詳細な説明
以上がAngularJS モーダル ボックス テンプレート ngDialog ユースケースの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。