Question

对angularjs来说是新手。我已经看到了link这段代码。它对我来说很好。但我不知道它是如何工作的？从哪里被称为？

有人可以解释一下吗？

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

Answer 1

以下是该指令正在做的事情的要点：

分配一个功能来处理＆＃34; onsubmit＆＃34;该元素的事件
看起来该指令旨在成为一个属性，它接受一个函数作为其值。检索该函数：

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-error或has-success CSS类将应用于元素（基于表单是否有效）。

请注意，只有在提交表单时才会添加/删除CSS类，这是由于该函数开头的guard子句：

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

任何人都可以解释这个指令吗？

1 个答案: