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?

score 2 · Answer 1 · answered Jul 28 '15 at 17:18

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>

Wow, you can inline JS stuff on SO? Awesome! Nice answer! – Kohányi Róbert Jul 28 '15 at 17:22 — Kohányi Róbert, Jul 28 '15 at 17:22

Kohányi Róbert · Answer 2 · 2015-07-28T17:36:42.530

0

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.

edited Jul 28 '15 at 17:36

answered Jul 28 '15 at 17:21

Kohányi Róbert

9,791
4
52
81

It is definitely NOT an issue in my case. I have this module defined in a project folder. I just use it name to create a directive in a separate file. Sorry, if I confused you. – dim0_0n Jul 28 '15 at 17:28
1

@dim0_0n Then please update your question a little bit, because the code you've provided contains errors. Try to isolate your problem. – Kohányi Róbert Jul 28 '15 at 17:29
@dim0_0n Well, the code provided works for me. Did you check out the Plunker I've linked? Did that works for you? If not ... what kind of browser are you using? What kind of error output you get when running the code? – Kohányi Róbert Jul 28 '15 at 17:38

Confirmation dialog directive on button type="submit" - AngularJS

2 Answers2