Node.js開發入門—使用對話方塊ngDialog，node.jsngdialog
做網站經常會遇到彈出對話方塊擷取使用者輸入或彈出對話方塊讓使用者確認某個操作之類的情景，有一個基於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='stylesheet' href='/stylesheets/ngDialog-0.4.0.min.css' ><link/> <link rel='stylesheet' href='/stylesheets/ngDialog-theme-default-0.4.0.min.css' ><link/> <link rel='stylesheet' href='/stylesheets/ngDialog-theme-plain-0.4.0.min.css' ><link/></head><body ng-controller='myController'> <p><button type='button' ng-click='openDialog()'>Open Default</button></p> <p><button type='button' ng-click='openPlainDialog()'>Open Plain theme</button></p> <p><button type='button' ng-click='openDialogUseText()'>Open use text</button></p> <p><button type='button' ng-click='openModal()'>Open modal</button></p> <p><button type='button' ng-click='openUseExternalTemplate()'>Open use template on server</button></p> <p><button type='button' ng-click='openConfirmDialog()'>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"> <div><p>text in dialog</p></div> </script></body></html>ngdialog.js內容：
angular.module('myApp', ['ngDialog']). controller('myController', function($scope,$rootScope, ngDialog){ $scope.template = '<div><p>text in dialog</p><p><button type="button">Button</button></p><div>'; //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: '<div class="ngdialog-message"><h3>Please enter your name</h3><p>User Name:<input ng-model="userName"></input></p></div><div 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></div>', 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> <div> <h3>Server Template for ngDialog</h3> <li>Node.js</li> <li>Express</li> <li>AngularJS</li> <li>MongoDB</li> </div></body></html>要使用ngDialog，需要在HTML中使用script引入對應的js庫檔案。另外還要在head部分引入幾個css檔案。參考ngdialog.html即可。
ngDialog的庫檔案可以到https://github.com/likeastore/ngDialog下載，或者到這裡下載：http://cdnjs.com/libraries/ng-dialog。我是在後面這個連結下的0.4.0版本，把檔案重新命名了一下。重新命名後的幾個檔案如下：
我學習時遇到了一些疑惑，記錄在下面。
對話方塊內容範本要顯示一個對話方塊，必須得指定待現實的內容。這是通過template屬性指定的。template有三種情況：
<p>Text in ngDialog</p><script type="text/ng-template" id="firstDialogId"><div><p>text in dialog</p></div></script>可以在options裡通過className指定主題，目前有ngdialog-theme-default和ngdialog-theme-plain兩個主題。這兩個注意對應兩個css檔案，前面我們已經通過HTML引入了。
響應關閉等事件對話方塊被關閉時，會發出一些事件，開發人員可以監聽這些事件來獲得通知。具體事件有：
這些事件定義在$rootScope服務裡，所以我們的controller建構函式必須依賴$rootScope。比如我們現在的模組定義和controller定義：
angular.module(‘myApp’, [‘ngDialog’]).
controller(‘myController’, function(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參數獲得使用者名稱輸入框的值。
其它文章：
著作權聲明：本文為foruok原創文章，未經博主允許不得轉載。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
