按钮类型为“ submit”的确认对话框指令-AngularJS

Question

提交表单时，我想为确认对话框创建指令。 我在这里发现的问题是相似的，但不能解决我的问题：

<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

将您的代码按原样插入小提琴并查看控制台会产生此错误：

未捕获的错误：[$ 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> 

Answer 2

我只是在猜测，但我认为您的问题如下

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

首次创建模块时 ， angular.module函数需要（至少）两个参数。 请参阅相关文档 ，其中指出：

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

所以将上面的代码更改为

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

请注意第二个[]参数。

有关工作示例，请参见此plnkr。

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