按钮类型上的确认对话框指令=“提交”;——AngularJS

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

本文关键字：提交 AngularJS 确认 对话框 指令 按钮类型      更新时间：2023-09-26

我想创建一个指令的确认对话框，当我提交表单。我在这里发现的问题是类似的，但它不能解决我的问题:

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

当我点击按钮时，对话框不会出现。我错过了什么?

将您的代码原样插入到fiddle中并查看控制台产生以下错误:

未捕获错误:[$injector:nomod]模块'haha'不可用!您要么拼错了模块名，要么忘记加载它。如果注册一个模块，请确保将依赖项指定为第二个参数。

注册模块时需要指定一个数组作为第二个参数。

(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>

我只是猜测，但我认为你的问题是以下

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

当您第一次创建模块时，angular.module函数期望(至少)两个参数。请参阅相关文档，其中说:

如果指定[第二个参数]，则正在创建新模块。如果未指定，则正在检索模块以进行进一步操作配置。

所以把上面的代码改成

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

请注意第二个[]参数。

查看这个plnkr的工作示例。

如果您删除第二个[]参数，则会在控制台上抛出错误。

相关文章：