首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在angular Ng-Dialog模式中处理按钮单击事件

在angular Ng-Dialog模式中处理按钮单击事件
EN

Stack Overflow用户
提问于 2016-02-23 13:16:31
回答 1查看 2.6K关注 0票数 1

我有一个Angularjs应用程序。我有一个表单点击提交按钮,我正在打开一个ngModal弹出窗口。我不知道如何处理模式窗口中出现的按钮单击事件。我附上了以下代码以供参考:

在我的控制器中:

代码语言:javascript
复制
 $scope.ModelValue="Username:"
 $scope.displayModal = function () {
        ngDialog.open({template: 'app/modal/modal.html', scope: $scope});
    }

我的Modal.html内部

代码语言:javascript
复制
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header primary">
      <h4 class="modal-title" id="myModalLabel">Confirmation</h4>
    </div>
    <div id= "modal-section" class="modal-body">
      {{ModelValue}}
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" data-dismiss="modal">Confirm</button>
    </div>
  </div>
</div>

在我的指令中:

代码语言:javascript
复制
'use strict';
angular.module('myApp')
  .directive('modal', function ($parse) {
    return {
      template: '<div class="modal fade">' +
      '<div class="modal-dialog">' +
        '<div class="modal-content">' +
          '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
            '<h4 class="modal-title">{{ title }}</h4>' +
          '</div>' +
          '<div class="modal-body" ng-transclude></div>' +
        '</div>' +
      '</div>' +
    '</div>',
    restrict: 'E',
    transclude: true,
    replace:true,
    scope:true,
    link: function postLink(scope, element, attrs) {
      scope.title = attrs.title;
      scope.$watch(attrs.visible, function(value){
        if(value == true)
          element.modal('show');
        else
          element.modal('hide');
      });
      $(element).on('shown.bs.modal', function(){
        scope.$apply(function(){
          scope.$parent[attrs.visible] = true;
        });
      });

      $(element).on('hidden.bs.modal', function(){
        scope.$apply(function(){
          scope.$parent[attrs.visible] = false;
        });
      });
    }
  };
});

请让我知道如何处理确认和关闭按钮事件点击。单击确认按钮时,我需要在打开对话框的父控制器中处理事件。

EN

回答 1

Stack Overflow用户

发布于 2016-02-23 22:30:15

呼叫按钮点击,定义如下

代码语言:javascript
复制
<div class="ngdialog-buttons col-sm-8 col-sm-offset-2">

 <button type="button" id="btnClose" class="ngdialog-button ngdialog-button-secondary" ng-click=closeThisDialog("Cancel")>Cancel</button> 

 <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click=updateForm()>Save Changes</button>

 </div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35569388

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档