ng-dialog使用心得_angular ng-dialog-优快云博客

本文分享了在使用ng-dialog插件时遇到的$scope.openConfirm()不是函数的问题，详细介绍了问题出现的原因和解决方案，包括通过创建dialog对象并使用其内置的close()方法来关闭弹窗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-dialog使用心得
一、重写confirm()函数
1.遇到问题：
使用插件API：openConfirm(options)时报错：$scope.openConfirm() is not a function.
代码如下：

 $scope.confirm = function(msg) {
    ......some code......
    $scope.openConfirm();
  }

2.解决方法如下
考虑可能是作用域问题导致，实例化一个dialog对象，运用对象内置的close()方法关闭弹窗。

a.js代码：

var myModule = angular.module('myModule', 'ngDialog')
.controller('appCtl', ['$scope', 'ngDialog', ctl])
function ctl($scope,ngDialog) {
$scope.dialog = '';
  $scope.clickToOpen = function() {
    $scope.dialog = ngDialog.open({  //实例化，方便使用close()方法
      template: 'modalDialogId',
      className: 'ngdialog-theme-default',
      scope: $scope
    });
  }
 $scope.confirm = function(msg) {
    ......some code......
    $scope.dialog.close();
  }

b.Html代码部分：

<!doctype html>
<html ng-app="'myModule'">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/ng-dialog/css/ngDialog.min.css">
<link rel="stylesheet" href="lib/ng-dialog/css/ngDialog-theme-default.min.css">
</head>
<body>
<p>
<a href="javascript:void(0)" ng-click="clickToOpen()">弹出Dailog</a>
</p>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="lib/ng-dialog/js/ngDialog.min.js"></script>

<script type="text/ng-template" id="modalDialogId">
    <div class="ngdialog-message"></div>
<div class="ngdialog-buttons">
    <button type="button" ng-click="confirm(params)">
        确定
    </button>
    <button type="button" ng-click="closeThisDialog('button')">取消
    </button>
      </div>
</script>
</html>