CODEWITHSUNDEEP
angularjs
Stone
Stone

Reputation: 33

AngularJs-Getting unhandled rejection while closing the dialog box

I'm learning AngularJs. I have created a form which when submitted it open's a dialog box to verify the given details which is working fine.
But when I'm closing the modal box I'm getting few exception:

index.jsp
-------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Home | Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/js/ngDialog.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog-theme-default.css">
<script src='<c:url value="/app.js"></c:url>'></script>
</head>
<body>
    <div  ng-app="myApp" ng-controller="myController">
        First Name:<input type="text" name="first" ng-model="first">
        <br>
        Last Name:<input type="text" name="last" ng-model="last">
        <br>
        <button ng-click="openDialog(first,last)">Dialog</button>
        <br>
        {{first}}
    </div>
</body>
</html>

dialog.html
----------------

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <form name="dialog">
        First Name:<input type="text" name="fi" ng-model="first">
        <br>
        First Name:<input type="text" name="ls" ng-model="last">
        <br>
        <button ng-click="save(first,last)">Save</button>
    </form>
</body>
</html>

app.js
-----------

var app= angular.module("myApp",['ngDialog']);
    app.controller("myController",function($scope,ngDialog,$timeout){
        $scope.openDialog= function(first,last){
            $scope.Dialog= ngDialog.openConfirm({
                template: 'dialog.html',
                className: 'ngdialog-theme-default',
                scope: $scope,
                showClose: true
            })
        }

        $scope.save= function(first,last){
            alert(first+last+"saved");
            $scope.Dialog.close();
        }
    });

stacktrace
---------------

TypeError: $scope.Dialog.close is not a function
Possibly unhandled rejection: $closeButton

Upvotes: 2

Views: 336

Answers (2)

Akbar Taghipour
Akbar Taghipour

Reputation: 334

openConfirm() Opens a dialog that by default does not close when hitting escape or clicking outside the dialog window. The function returns a promise that is either resolved or rejected depending on the way the dialog was closed.

var app = angular.module("myApp", ['ngDialog']);
app.controller("myController", function ($scope, ngDialog, $timeout) {
    $scope.openDialog = function (first, last) {
        $scope.Dialog = ngDialog.openConfirm({
            template: 'dialog.html',
            controller: ['$scope', function ($scope) {
                $scope.first = first;
                $scope.last = last;
                $scope.save = function (first, last) {
                    alert(first + last + "saved");
                }
            }],
            className: 'ngdialog-theme-default',
            scope: $scope,
            showClose: true
        }).then(function (success) {
            alert(success);
        });
    }
});

Upvotes: 1

adolfotcar
adolfotcar

Reputation: 565

The problem is that openConfirm() returns a promisse rather than an object like open() does. So you should user open() instead of openConfirm() if you want to have an object returned. Check ngDialog GitHub

Upvotes: 0

Related Questions