Node.jsダイアログボックスngDialogの使い方

今回は、Node.jsのダイアログボックスngDialogの使い方と、ダイアログボックスngDialogを使用してNode.jsを操作する際の注意点について説明します。実際の事例を見てみましょう。 Web サイトを構築するとき、ユーザー入力を取得するためのダイアログ ボックスが表示されたり、ユーザーに操作の確認を求めるダイアログ ボックスが表示されたりする状況によく遭遇します。そのようなことを実現するのに役立つ AngularJS ベースの拡張モジュールがあります。物事をエレガントに：ngDialog。

ngDialog は、さまざまな使用法を示すサンプル Web ページを github で提供しています (

https://

github.com/likeastore/ngDialog/blob/master/example/index.html)。 ngDialog の github ホームページの readme には、一般的に使用される手順とサービスの詳細な紹介も記載されており、参照することができます。私の記事は純粋に ngDialog の例に基づいています。 ngDialog.open(options) または ngDialog.openconfirm(options) を使用してダイアログ ボックスを作成します。前者は通常のダイアログ ボックスを開き、テーマやテンプレートなどの一連の属性はオプションで指定できます。後者はデフォルトでエスケープを拒否してダイアログ ボックスの外で自動的に閉じるダイアログ ボックスを開きます。 options は、次のような json オブジェクトです:

{template: 'tplId',closeByEscape: false}

構築例 まず簡単な例を見てみましょう。 Express Generator を使用して新しいアプリケーションを作成するか、「Node.js 開発入門 - ログインを維持するための Cookie の使用」の LoginDemo サンプルを直接使用します。すべてが完了しました。

あなたが書いたファイルを追加します

あなたが書いた 3 つのファイルがあります。ngdialog.html ファイルとserverTpl.html ファイルはプロジェクトの public ディレクトリに配置され、ngdialog.js は public/

javascript

s の下に配置されます。 ngdialog.html コンテンツ:

nbsp;html>


 <title>use ngDialog in AngularJS</title>
 <link><link>
 <link><link>
 <link><link>


 <p><button>Open Default</button></p>
 <p><button>Open Plain theme</button></p>
 <p><button>Open use text</button></p>
 <p><button>Open modal</button></p>
 <p><button>Open use template on server</button></p>
 <p><button>Open Confirm</button></p>
 <script></script>
 <script></script>
 <script></script>
 <!-- Templates -->
 <script>
  <p><p>text in dialog
 </script>

ngdialog.js コンテンツ:

angular.module('myApp', ['ngDialog']).
 controller('myController', function($scope,$rootScope, ngDialog){
  $scope.template = '<p></p><p>text in dialog</p><p><button>Button</button></p><p>';
  //different template
  $scope.openDialog = function(){
   ngDialog.open({template: 'firstDialogId'});
  };
  $scope.openPlainDialog = function(){
   ngDialog.open({
    template: 'firstDialogId', //use template id defined in HTML
    className: 'ngdialog-theme-plain'
   });
  }
  $scope.openDialogUseText = function(){
   ngDialog.open({
    template: $scope.template, //use plain text as template
    plain: true,
    className: 'ngdialog-theme-plain'
   });
  }
  $scope.openModal = function(){
   ngDialog.open({
    template: '</p><p>Text in Modal Dialog</p>',
    plain: true,
    className: 'ngdialog-theme-default',
    closeByEscape: false,
    closeByDocument: false
   });
  }
  $scope.openUseExternalTemplate = function(){
   ngDialog.open({
    template: 'serverTpl.html',
    plain: false,
    className: 'ngdialog-theme-default',
    closeByEscape: false,
    closeByDocument: false
   });
  };
  $rootScope.userName = "ZhangSan";
  $scope.openConfirmDialog = function(){
   ngDialog.openConfirm({
    template: '<p></p><h3 id="Please-enter-your-name">Please enter your name</h3><p>User Name:<input></p><p><button>Cancel</button><button>Confirm</button></p>',
    plain: true,
    className: 'ngdialog-theme-default'
   }).then(
    function(value){
     console.log('confirmed, value - ', value);
    },
    function(reason){
     console.log('rejected, reason - ', reason);
    }
   );
  }
  //listen events
  $rootScope.$on('ngDialog.opened', function (e, $dialog) {
    console.log('ngDialog opened: ' + $dialog.attr('id'));
  });
  $rootScope.$on('ngDialog.closed', function (e, $dialog) {
    console.log('ngDialog closed: ' + $dialog.attr('id'));
  });  
 });

serverTpl.html コンテンツ:

nbsp;html>


 <title>A Server Template for ngDialog</title>


 <p>
  </p><h3 id="Server-Template-for-ngDialog">Server Template for ngDialog</h3>
  

Node.js

  

Express

  

AngularJS

  

MongoDB

 

ngDialog の紹介 ngDialog を使用するには、HTML でスクリプトを使用して、対応する js を導入する必要がありますライブラリファイル。さらに、head 部分にいくつかの css ファイルを導入する必要があります。 ngdialog.html を参照してください。

ngDialog ライブラリ ファイルは、https://github.com/likeastore/ngDialog からダウンロードするか、ここからダウンロードできます: http://cdnjs.com/libraries/ng-dialog。以下のリンクにあるバージョン 0.4.0 のファイルの名前を変更しました。名前が変更されたファイルは次のとおりです:

ngDialog-0.4.0.min.js
ngDialog-0.4.0.min.css
ngDialog-theme-default-0.4.0.min .css
ngDialog-theme-plain-0.4.0.min.css

APIの概要学習

学習中にいくつかの疑問に遭遇したので、以下に記録します。

ダイアログコンテンツテンプレートダイアログボックスを表示するには、表示するコンテンツを指定する必要があります。これは、テンプレート属性によって指定されます。テンプレートには 3 つの状況があります:

js または html コードに埋め込まれたプレーン テキスト テンプレート このとき、オプションで plain 属性を同時に true、つまり "plain:true" に設定する必要があります。次に、HTML コードの一部をテンプレートに直接割り当てます。たとえば、template:

Text in ngDialog

HTML でテンプレートを定義し、テンプレートに ID を指定して割り当てます。テンプレート オプションの ID (「template: 'templateId'」など)。テンプレートは次のようになります:> ;
「template: 'serverTpl.html'」などの外部 HTML フラグメント (ファイル) をテンプレートとして使用します。serverTpl.html ファイルはサーバー上にあります。

テーマを指定します オプションの className を通じてテーマを指定できます。現在、ngdialog-theme-default と ngdialog-theme-plain の 2 つのテーマがあります。これら 2 つのメモは、以前に HTML を通じて紹介した 2 つの CSS ファイルに対応しています。

閉じるなどのイベントへの応答ダイアログボックスが閉じられると、いくつかのイベントが生成され、開発者はこれらのイベントをリッスンして通知を受け取ることができます。特定のイベントは次のとおりです:

ngDialog.opened

2. ngDialog.closing

3. ngDialog.closed

这些事件定义在$rootScope服务里，所以我们的controller构造函数必须依赖$rootScope。比如我们现在的模块定义和controller定义：

angular.module(‘myApp', [‘ngDialog']). 
controller(‘myController', function(scope,scope,rootScope, ngDialog){

在模块定义里注明依赖ngDialog模块，在controller定义里注入了$rootScope和ngDialog。

如何监听事件，看ngdialog.js代码吧。

另外我们还可以在options中设置preCloseCallback，指定一个函数，这个函数在对话框取消关闭之前会调用到。https://github.com/likeastore/ngDialog这里有说明。注意，是取消对话框时会调用到，如果确认，不会调到哦。所以，这个preCloseCallback通常在阻止或提醒用户放弃输入时使用，比如用户注册，输入了一些信息，想退，你可以问他是否要真的想放弃。

指定对话框的controller

可以通过options设置controller属性来给一个对话框指定控制器。这个控制器可以是内联（inline）的：

    $scope.openInlineController = function () {
      $rootScope.theme = 'ngdialog-theme-plain';
      ngDialog.open({
        template: 'withInlineController',
        controller: ['$scope', '$timeout', function ($scope, $timeout) {
          var counter = 0;
          var timeout;
          function count() {
            $scope.exampleExternalData = 'Counter ' + (counter++);
            timeout = $timeout(count, 450);
          }
          count();
          $scope.$on('$destroy', function () {
            $timeout.cancel(timeout);
          });
        }],
        className: 'ngdialog-theme-plain'
      });
    };

也可以是在js中定义的。比如我们在js里定义了一个名为“InsideCtrl”的controller，就可以在调用ngDialog.open(options)时在options里设置controller属性：

$scope.openInsideController = function(){
 ngDialog.open({
  template: "serverTpl.html",
  className: "ngdialog-theme-plain",
  controller: "InsideCtrl"
 });
};

具体示例可以参考：https://github.com/likeastore/ngDialog/blob/master/example/index.html。

确认对话框

比如让用户确认删除，让用户输入。使用openConfirm(options)就可以创建这样的对话框。ngDialog向$scope注入了两个函数，一个是confirm(value)，一个是closeThisDialog(reason)，分别用来确认关闭对话框，取消关闭对话框。将它们关联到确认和取消按钮上，就可以确认、取消对话框。

假如我要让用户输入用户名，可以用ng-model指令将作用域内某个变量和input绑定，在调用confirm时传入绑定的变量，这样就可以在confirm中拿到用户填写的值来做进一步处理。我们的示例中的openConfirmDialog按钮，点击后就弹出一个让用户输入名字的对话框，当用户输入完毕，点击Confirm按钮时，我们可以通过confirm方法的value参数获得用户名输入框的值。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样操作Node.js 使用jade模板引擎

Node.js Express安装与使用详细介绍

以上がNode.jsダイアログボックスngDialogの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。