Question

在一个角度js指令中，该指令位于＆＃34;表格输入级别＆＃34;我想要一个对父表单的引用，以便访问＆＃34; on submit＆＃34;事件

现在，我可以通过ID查询表单并添加提交。

但是，我想用angula＆＃34;元素＆＃34;来实现它。方法。但它只是赢了工作。

angular.module('app.common').directive('validateField', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        require: '^form',
        scope: {
            error: '=validateField'
        },
        link: function(scope, el, attrs, form) {

            if (document.getElementById('testing')){

                var e = angular.element(document.getElementById('testing'))
                e.on('submit', function() {
                    console.log('Works!');
                })
            };

            el.parent('form').on('submit', function() {
                console.log('How do i do this?');
            })
        }
    };
}]);

任何想法如何？

更新

我找到了一个解决方案，但不确定它是否优雅：

// Validate field on "form submit".
            angular.element(el[0].form).on('submit', function() {
                validate();
            });

Answer 1

嗯，这看起来对我来说是“错误的”。您的指令不需要以这种方式了解其自身范围之外的某些特定元素。您通常会使用某种服务来跨组件同步数据或提供您需要的事件/事件处理，或让您的控制器将两者结合在一起。

如果没有看到你在事件处理程序中尝试做什么，很难知道你想要实现什么，但看起来你只是打算做一些验证。你能不能使用一些自定义的AngularJS验证吗？

https://docs.angularjs.org/guide/forms#custom-validation

Answer 2

您可以在angular.element函数中使用CSS选择器，

angular.element('#myId'),
angular.element('.myClass')

话虽如此，当您需要表单控制器时，通过使用它的$ name属性，您可以进一步抽象您的指令：

require: '^form',
link: function(scope,el,attrs,form) {
    ...
    if(form.$name) {
        var domForm = angular.element("[name=" + form.$name + "]")
        domForm.addClass('whee');
    }
}

如何使用angular“element”parent或find方法来访问父表单？

2 个答案: