Confirmation dialog directive on button type=“submit” - AngularJS

Question

I want to create a directive for confirmation dialog, when I submit the form. The question I found here is similar, but it doesn't solve my issue:

<button confirm-ng-click="Reset password?" type="submit" class="md-primary">Reset</button>

And the JS:

(function () {
    'use strict';

    angular.module('haha', [])
        .directive('confirmNgClick', [ConfirmNgClick]);

    function ConfirmNgClick() {
        return {
            priority: -1,
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('click', function (event) {
                    var message = attrs.confirmNgClick;
                    if (message && !confirm(message)) {
                        event.stopImmediatePropagation();
                        event.preventDefault();
                    }
                })
            }
        }
    }
})();

So, when I click button, the dialog doesn't show up. What am I missing?

Answer 1

Plugging your code as is into fiddle and looking at the console produced this error:

Uncaught Error: [$injector:nomod] Module 'haha' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

You need to specify an array as the second argument when registering a module.

 (function() { 'use strict'; // Notice second argument here angular.module('haha', []) .directive('confirmNgClick', [ConfirmNgClick]); function ConfirmNgClick() { return { priority: -1, restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function(event) { var message = attrs.confirmNgClick; if (message && !confirm(message)) { event.stopImmediatePropagation(); event.preventDefault(); } }) } } } })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="haha"> <button confirm-ng-click="Reset password?" type="submit" class="md-primary">Reset</button> </div> 

Answer 2

I'm just guessing here, but I think your problem is the following

angular.module('haha')
    .directive('confirmNgClick', [ConfirmNgClick]);

The angular.module function expects (at least) two arguments when you create you module the first time . See the related documentation which says that:

If specified [the second argument] then new module is being created. If unspecified then the module is being retrieved for further configuration.

So change above code to

angular.module('haha', [])
    .directive('confirmNgClick', [ConfirmNgClick]);

Please note the second [] parameter.

See this plnkr for working example.

If you remove the second [] parameter then an error is raised on the console by the way.