Modal - TypeError: Cannot read property 'value' of undefined

[dman777]

Randomly, without consistency, get the following error with my modal. I am using version 11.00, so I am not sure what to do as I was hoping this was a issue from 10.00 which was resolved...or is it my code?

TypeError: Cannot read property 'value' of undefined
    at Object.$modalStack.dismiss (http://10.14.213.161:9000/bower_components/angular-bootstrap/ui-bootstrap-tpls.js:2014:59)
    at Object.modalInstance.dismiss (http://10.14.213.161:9000/bower_components/angular-bootstrap/ui-bootstrap-tpls.js:2078:29)
    at Scope.$scope.cancel (http://10.14.213.161:9000/directives/confirmModal.js:37:31)
    at http://10.14.213.161:9000/bower_components/angular/angular.js:10348:21
    at http://10.14.213.161:9000/bower_components/angular/angular.js:18333:17
    at Scope.$eval (http://10.14.213.161:9000/bower_components/angular/angular.js:12175:28)
    at Scope.$apply (http://10.14.213.161:9000/bower_components/angular/angular.js:12273:23)
    at HTMLButtonElement.<anonymous> (http://10.14.213.161:9000/bower_components/angular/angular.js:18332:21)
    at HTMLButtonElement.jQuery.event.dispatch (http://10.14.213.161:9000/bower_components/jquery/dist/jquery.js:4409:9)
    at HTMLButtonElement.elemData.handle (http://10.14.213.161:9000/bower_components/jquery/dist/jquery.js:4095:28) angular.js:9563
Canceled 

directive:

angular.module('main.vips').directive('confirmModal', 
    function($modal) {
        var confirmModal = function(theScope) {
            return $modal.open({
                templateUrl: '../confirm_modal.html',
                scope: theScope,
                backdrop: false
            });
        }
      return {
        transclude: true,
        scope: {
          'iconAttribute': "@",
        },
        controller: function($scope, $element, $attrs) {
            var modalInstance;
            $scope.commentBox = {}

            function modalWork() {
                modalInstance.result.then(function() {
                    //if promise is fullfilled
                    console.log($scope.commentBox.text);
                }, function() {
                    //if promise is deferred/rejected
                    console.log("Canceled")
                })
                .finally(function() {
                    $scope.commentBox.text = "";
                    //beware of  
                    //https://github.com/angular-ui/bootstrap/issues/1643
                    //hopefully, angular.ui 11 will fix
                    //still testing. 
                });
            }
            $scope.cancel = function() { 
                modalInstance.dismiss();
                modalWork();
            }
            $scope.ok = function() { 
                modalInstance.close();
                modalWork();
            }
            $element.on("click", function(event) {
                modalInstance = confirmModal($scope);
            });
        }
     }
});

modal template:

<div class="modal-header" style="background-color: #E9E6E6">
    <h3 class="modal-title">Confirm</h3>
</div>
<ng-form name="commentBoxForm">
    <div class="modal-body">
        <p>Your change will be logged. Please provide a ticket number or comment for reference</p>
        <div class="row">
            <div class="span4">
                <textarea type="text" class="form-control"
                    placeholder="Enter Text Here"
                    ng-required="true"
                    ng-model="commentBox.text"></textarea>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="background-color: #E9E6E6">
        <button type="button" ng-disabled="commentBoxForm.$invalid" 
            class="btn btn-primary" ng-click="ok()">OK</button> 
        <button type="button" class="btn btn-primary" ng-click="cancel()" >Cancel</button> 
    </div>
</form>

[shatle]

+1

[yeraycaballero]

+1

[chrisirhc]

Are you certain you're on 0.11 ? I can't find code on 0.11 that will lead to this. It'll help if you posted a Plunker.

[yeraycaballero]

Your are right, I'm on 0.10.0 and that piece of code is not on 0.11.0. Sorry for the confusion

[highfeed]

+error on 0.11

[aaccurso]

+1

[jasonbaik]

👍

[infowebster]

This issue can be reproduced in our environment (Version 0.11.0) when we click on a 'cancel' button which results in an ng-click="$dismiss()".

Cancel

==> Console log:
TypeError: Cannot read property 'value' of undefined
at Object.$modalStack.dismiss (...)
at Scope.modalInstance.dismiss as $dismiss
at $parseFunctionCall (..)
at callback (..)
at Scope.$eval (..)
at Scope.$apply (..)
at HTMLButtonElement. (..)

==> angular-ui-bootstrap Version 0.11.0
$modalStack.dismiss = function (modalInstance, reason) {
var modalWindow = openedWindows.get(modalInstance).value;
...

[infowebster]

Just have seen that this issue has already been fixed with #1972 - but has not been released yet.

[pkozlowski-opensource]

The fix was released as part of 0.11.2.