首頁 > 文章 > web前端 > Node.js使用對話框ngDialog實作步驟詳解

Node.js使用對話框ngDialog實作步驟詳解

php中世界最好的语言原創: 2018-05-22 10:45:591721瀏覽

這次帶給大家Node.js使用對話框ngDialog實作步驟詳解，Node.js使用對話框ngDialog的注意事項有哪些，以下就是實戰案例，一起來看一下。

做網站經常會遇到彈出對話框獲取用戶輸入或彈出對話框讓用戶確認某個操作之類的情景，有一個基於AngularJS的擴展模組可以幫我們優雅地完成這類事情： ngDialog。

ngDialog在github上提供了一個範例網頁，示範了它的各種用法，在這裡：https://github.com/likeastore/ngDialog/blob/master/example/index.html。 ngDialog的github首頁的readme也對常用的指令和服務做了較為詳細的介紹，可以參考。我這篇就純粹是參考ngDialog的範例來的。

建立對話框可以是用ngDialog.open(options)或ngDialog.openConfirm(options)。前者開啟一個普通的對話框，可以透過options制定諸如主題、模板等一系列屬性，後者開啟一個預設拒絕escape關閉和點擊對話框之外自動關閉的對話框。 options是json對象，類似下面：

{template: 'tplId',closeByEscape: false}

範例搭建

先看下我的簡單範例。使用express generator建立一個新應用，或直接使用Node.js開發入門－使用cookie保持登入裡的LoginDemo範例。都成。

加入自己寫的文件

有三個自己寫的文件，ngdialog.html和serverTpl.html文件放在專案的public目錄下，ngdialog.js放在public/javascripts下面。

##ngdialog.html內容：

<!doctype html>
<html ng-app="myApp">
<head>
 <title>use ngDialog in AngularJS</title>
 <link rel=&#39;stylesheet&#39; href=&#39;/stylesheets/ngDialog-0.4.0.min.css&#39; ><link/>
 <link rel=&#39;stylesheet&#39; href=&#39;/stylesheets/ngDialog-theme-default-0.4.0.min.css&#39; ><link/>
 <link rel=&#39;stylesheet&#39; href=&#39;/stylesheets/ngDialog-theme-plain-0.4.0.min.css&#39; ><link/>
</head>
<body ng-controller=&#39;myController&#39;>
 <p><button type=&#39;button&#39; ng-click=&#39;openDialog()&#39;>Open Default</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openPlainDialog()&#39;>Open Plain theme</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openDialogUseText()&#39;>Open use text</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openModal()&#39;>Open modal</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openUseExternalTemplate()&#39;>Open use template on server</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openConfirmDialog()&#39;>Open Confirm</button></p>
 <script src="/javascripts/angular-1.4.3.min.js"></script>
 <script src="/javascripts/ngDialog-0.4.0.min.js"></script>
 <script src="/javascripts/ngdialog.js"></script>
 <!-- Templates -->
 <script type="text/ng-template" id="firstDialogId">
  <p><p>text in dialog</p></p>
 </script>
</body>
</html>

ngdialog.js內容：

angular.module('myApp', ['ngDialog']).
 controller('myController', function($scope,$rootScope, ngDialog){
  $scope.template = '<p><p>text in dialog</p><p><button type="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>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 class="ngdialog-message"><h3>Please enter your name</h3><p>User Name:<input ng-model="userName"></input></p></p><p class="ngdialog-buttons"><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()">Cancel</button><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(userName)">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內容：

<!doctype html>
<html>
<head>
 <title>A Server Template for ngDialog</title>
</head>
<body>
 <p>
  <h3>Server Template for ngDialog</h3>
  <li>Node.js</li>
  <li>Express</li>
  <li>AngularJS</li>
  <li>MongoDB</li>
 </p>
</body>
</html>

#引入ngDialog

要使用ngDialog，需要在HTML中使用script引入對應的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摘要學習

我學習時遇到了一些疑惑，記錄在下面。

對話框內容範本

要顯示一個對話框，必須要指定待現實的內容。這是透過template屬性指定的。 template有三種情況：

嵌入在js或html程式碼裡的純文字模板，此時需要同時在options裡設定plain屬性為true，即“plain:true”，然後直接將一段html程式碼賦值給template，例如template:
Text in ngDialog

指定主題#可以透過className指定主題，目前有ngdialog-theme-default和ngdialog -theme-plain兩個主題。這兩個注意對應兩個css文件，前面我們已經透過HTML引入了。

當回應關閉等事件對話方塊關閉時，會發出一些事件，開發者可以監聽這些事件來獲得通知。具體事件有：

这些事件定义在$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使用對話框ngDialog實作步驟詳解

相關文章