CODEWITHSUNDEEP
javascriptangularjs
dim0_0n
dim0_0n

Reputation: 2494

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

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?

Upvotes: 0

Views: 1516

Answers (2)

Koh&#225;nyi R&#243;bert
Koh&#225;nyi R&#243;bert

Reputation: 10121

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.

Upvotes: 0

Patrick
Patrick

Reputation: 6948

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>

Upvotes: 2

Related Questions