做網(wǎng)站經(jīng)常會遇到彈出對話框獲取用戶輸入或彈出對話框讓用戶確認(rèn)某個(gè)操作之類的情景，有一個(gè)基于AngularJS的擴(kuò)展模塊可以幫我們優(yōu)雅地完成這類事情：ngDialog。
ngDialog在github上提供了一個(gè)示例網(wǎng)頁，演示了它的各種用法，在這里：https://github.com/likeastore/ngDialog/blob/master/example/index.html。ngDialog的github主頁的readme也對常用的指令和服務(wù)做了較為詳細(xì)的介紹，可以參考。我這篇就純粹是參考ngDialog的示例來的。
創(chuàng)建對話框可以是用ngDialog.open(options)或ngDialog.openConfirm(options)。前者打開一個(gè)普通的對話框，可以通過options制定諸如主題、模板等一系列屬性，后者打開一個(gè)默認(rèn)拒絕escape關(guān)閉和點(diǎn)擊對話框之外自動關(guān)閉的對話框。options是json對象，類似下面：
{template: 'tplId',closeByEscape: false}示例搭建
先看下我的簡單示例。使用express generator創(chuàng)建一個(gè)新應(yīng)用，或者直接使用Node.js開發(fā)入門——使用cookie保持登錄里的LoginDemo示例。都成。
添加自己寫的文件
有三個(gè)自己寫的文件，ngdialog.html和serverTpl.html文件放在項(xiàng)目的public目錄下，ngdialog.js放在public/javascripts下面。
ngdialog.html內(nèi)容：
<!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內(nèi)容：
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')); }); });
新聞熱點(diǎn)
疑難解答
圖片精選
