Node.js 대화 상자 ngDialog 사용 방법

이번에는 Node.js에서 ngDialog 대화 상자를 사용하는 방법과 ngDialog 대화 상자를 사용하여 Node.js를 실행할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

웹 사이트를 구축할 때 사용자 입력을 얻기 위해 대화 상자가 나타나거나 사용자에게 작업 확인을 요청하는 대화 상자가 나타나는 상황을 자주 접하게 됩니다. 이러한 작업을 수행하는 데 도움이 되는 AngularJS 기반 확장 모듈이 있습니다. 우아하게: ngDialog.

ngDialog는 다양한 용도를 보여주는 github의 예제 웹페이지를 제공합니다. 여기: https://github.com/likeastore/ngDialog/blob/master/example/index.html. ngDialog의 github 홈페이지의 추가 정보에는 일반적으로 사용되는 지침과 서비스에 대한 자세한 소개가 제공되어 참조할 수 있습니다. 내 기사는 순전히 ngDialog 예제를 기반으로 합니다.

ngDialog.open(옵션) 또는 ngDialog.openConfirm(옵션)을 사용하여 대화 상자를 만듭니다. 전자는 일반 대화 상자를 열고 테마, 템플릿 등 일련의 속성은 옵션을 통해 지정할 수 있습니다. 후자는 기본적으로 이스케이프를 거부하고 대화 상자 외부에서 자동으로 닫히는 대화 상자를 엽니다. options은 다음과 유사한 json 개체입니다.

{template: 'tplId',closeByEscape: false}

예제 구성

먼저 간단한 예를 살펴보겠습니다. Express 생성기를 사용하여 새 애플리케이션을 만들거나 Node.js 개발 시작하기 - 쿠키를 사용하여 로그인 상태 유지의 LoginDemo 예제를 직접 사용하세요. 모두 완료되었습니다.

작성한 파일 추가

작성한 파일은 3개입니다. ngdialog.html과 serverTpl.html 파일은 프로젝트의 public 디렉터리에 있고, ngdialog.js는 public/javascripts에 있습니다. .

ngdialog.html content:

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 content:

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 content:

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를 도입해야 합니다. 라이브러리 파일 . 또한 헤드 부분에는 여러 CSS 파일이 도입되어야 합니다. ngdialog.html을 참조하세요.

ngDialog 라이브러리 파일은 https://github.com/likeastore/ngDialog에서 다운로드하거나 여기(http://cdnjs.com/libraries/ng-dialog)에서 다운로드할 수 있습니다. 아래 링크에서 0.4.0 버전에서 파일 이름을 바꿨습니다. 이름이 바뀐 파일은 다음과 같습니다:

1. ngDialog-0.4.0.min.js

2. ngDialog-0.4.0.min.css

3. ngDialog-theme-default-0.4.0.min .css

4. ngDialog-theme-plain-0.4.0.min.css

API 요약 학습

학습 중 몇 가지 의심에 부딪혔는데, 그 내용이 아래에 기록되어 있습니다.

대화 상자 콘텐츠 템플릿

대화 상자를 표시하려면 표시할 콘텐츠를 지정해야 합니다. 이는 template 속성을 통해 지정됩니다. 템플릿에는 세 가지 상황이 있습니다.

1. js 또는 html 코드에 포함된 일반 텍스트 템플릿 이때 옵션에서 plain 속성을 true로 동시에 설정해야 합니다. 즉, "plain:true"입니다. 을 클릭한 다음 HTML 코드 조각을 템플릿에 직접 할당합니다. 예를 들어 template:

   Text in ngDialog

2. HTML에서 템플릿을 정의하고 템플릿에 ID를 지정한 다음 할당합니다. "template: 'templateId'"와 같은 템플릿 옵션에 대한 ID입니다. 템플릿은 다음과 같습니다.

   > ;

3. "template: 'serverTpl.html'"과 같은 외부 html 조각(파일)을 템플릿으로 사용하면 serverTpl.html 파일이 서버에 있습니다.

테마 지정

옵션의 className을 통해 테마를 지정할 수 있습니다. 현재 ngdialog-theme-default와 ngdialog-theme-plain의 두 가지 테마가 있습니다. 이 두 노트는 앞서 HTML을 통해 소개해드린 CSS 파일 두 개에 해당합니다.

닫기 등의 이벤트에 대한 응답

대화 상자가 닫히면 일부 이벤트가 발생하며 개발자는 이러한 이벤트를 듣고 알림을 받을 수 있습니다. 구체적인 이벤트는 다음과 같습니다:

1. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!