谁能解释这个指令?

瓦达帕利

我是angularjs的新手。我已经从此链接中看到了这段代码对我来说很好。但是我不知道它是如何工作的?从哪里来的呢?

有人可以解释吗?

  var app = angular.module('plunker', []);

 var ValidSubmit = ['$parse', function ($parse) {
        return {
            compile: function compile(tElement, tAttrs, transclude) {
                return {
                    post: function postLink(scope, element, iAttrs, controller) {
                        var form = element.controller('form');
                        form.$submitted = false;
                        var fn = $parse(iAttrs.validSubmit);
                        element.on('submit', function(event) {
                            scope.$apply(function() {
                                element.addClass('ng-submitted');
                                form.$submitted = true;
                                if(form.$valid) {
                                    fn(scope, {$event:event});
                                }
                            });
                        });
                        scope.$watch(function() { return form.$valid}, function(isValid) {
                            if(form.$submitted == false) return;
                            if(isValid) {
                                element.removeClass('has-error').addClass('has-success');
                            } else {
                                element.removeClass('has-success');
                                element.addClass('has-error');
                            }
                        });
                    }
                }
            }
        }
    }]
    app.directive('validSubmit', ValidSubmit);
乔什·达内尔(Josh Darnell)

这是该指令正在执行的要点:

分配了一个函数来处理该元素的“ onsubmit”事件。
看起来该伪指令旨在作为一个属性,它接受一个函数作为其值。该函数被检索:

var fn = $parse(iAttrs.validSubmit);

设置了onsubmit的事件处理程序:

element.on('submit', function(event) {

然后,如果表单有效,则调用该函数:

if(form.$valid) {
    fn(scope, {$event:event});

指令监视包含元素的表单的状态(有效或无效)
。$ watch函数用于在表单在有效和无效之间切换时触发事件:

scope.$watch(function() { return form.$valid}

无论何时提交表单,都会将CSS类应用于元素
当表单的有效性更改时,(has-errorhas-successCSS类)将应用于元素(基于表单是否有效)。

请注意,由于该函数开始处的guard子句,仅在提交表单时才添加/删除CSS类:

if(form.$submitted == false) return;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

谁能解释这个指令?

来自分类Dev

谁能解释这个javaScript

来自分类Dev

谁能解释这个代码

来自分类Dev

谁能解释这个复杂的指针表达?

来自分类Dev

朋友谁能解释这个代码

来自分类Dev

谁能解释这个Swift Option选项

来自分类Dev

谁能解释这个奇怪的活动?

来自分类Dev

谁能解释这个python静态类变量的情况?

来自分类Dev

谁能解释这个BFS代码是如何工作的?

来自分类Dev

谁能解释这个功能,我听不懂

来自分类Dev

谁能解释这个python静态类变量的情况?

来自分类Dev

谁能解释这个查询是什么意思?

来自分类Dev

谁能解释我这个Java代码是如何工作的?

来自分类Dev

谁能解释这个python语法-反向词

来自分类Dev

谁能解释这个功能程序的工作原理?

来自分类Dev

谁能解释如何简化这个集合算术问题?

来自分类Dev

谁能解释对功能的误解?

来自分类Dev

谁能解释这个错误[AttributeError:“ DataFrame”对象没有属性“ to_numeric”]

来自分类Dev

谁能解释这个按位函数来计算log(n)

来自分类Dev

谁能解释为什么这个单元测试失败了?

来自分类Dev

谁能解释这个没有代码体的类构造函数?

来自分类Dev

请谁能解释一下这个递归代码?

来自分类Dev

谁能解释我[列出源文件]?

来自分类Dev

谁能解释GHC对IO的定义?

来自分类Dev

谁能解释代码putchar('/'// * / 1)的含义

来自分类Dev

谁能解释以下vim命令?

来自分类Dev

关于Applet和AWT谁能解释?

来自分类Dev

C递归中的魔术?谁能解释?

来自分类Dev

谁能解释以下opengl代码?