Директива диалога подтверждения на кнопке type = "submit" - AngularJS

Question

Я хочу создать директиву для подтверждения, когда я отправлю форму. Вопрос, который я нашел here похож, но это не решает мою проблему:

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

И в 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(); 
        } 
       }) 
      } 
     } 
    } 
})(); 

Так что, когда я нажимаю кнопку, диалоговое окно не отображается. Что мне не хватает?

Answer 1

Подключив свой код как на скрипку и, глядя на консоли производства этой ошибки:

Uncaught Ошибка: [$ Инжектор: nomod] модуль «ха-ха» не доступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если регистрация модуля гарантирует, что вы укажете зависимости в качестве второго аргумента.

При регистрации модуля вам необходимо указать массив в качестве второго аргумента.

(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

Я просто предполагаю здесь, но я думаю, ваша проблема заключается в следующем

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

angular.module функция ожидает (по крайней мере) два аргумента при создании вас модуль в первый раз. See the related documentation который говорит, что:

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

Меняет выше код

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

Пожалуйста, обратите внимание, второй параметр [].

See this plnkr for working example.

Если удалить второй [] параметр, то возникает ошибка на консоли, кстати.