Écouter pour soumettre le formulaire d'événement dans la directive

Au lieu de regarder la $submitted de la propriété, vous pouvez créer une directive qui a le même nom que le form directive, qui est attaché avec un gestionnaire d'événements pour soumettre le formulaire qui diffuse angulaire de l'événement que vous pouvez écouter dans votre myDirective directive. Vous n'avez pas à vous soucier de substitution de l'angulaire de la mise en œuvre de la form directive, il va tout simplement ajouter votre comportement ne pas écraser le construit-dans la mise en œuvre.

DÉMO

Remarque: Vous pouvez également choisir de ne pas ajouter de la fonctionnalité à la form directive et, au lieu de choisir un autre nom de la directive, assurez-vous de bien attacher le nom de la directive en tant qu'attribut dans la balise form pour déclencher l'événement.

Javascript

.directive('form', function() {

  return {
    restrict: 'E',
    link: function(scope, elem) {
      elem.on('submit', function() {
         scope.$broadcast('form:submit');
      });
    }
  };

})

.directive('myDirective', function() {
  return {
    require: '^form',
    link: function(scope, elem, attr, form) {
      scope.$on('form:submit', function() {
        form.$setPristine();
      });
    }
  };
});

Mise à jour

À la lumière de la question dans le commentaire ci-dessous:

quel est le moyen le plus efficace pour vérifier si l'élément qui a
"mon-directive" attribut "mon-forme" (si j'ai le nom de "forme" de la directive de
"myForm") attribut dans son formulaire parent? Donc, je peux utiliser
"myDirective" avec ou sans "myForm" (et se comporter en conséquence de
cours)

Il y a plusieurs façons de le faire:

1. Utiliser le .data() méthode dans votre myForm directive lors de la phase de compilation, et accéder à la fonction de lien dans votre myDirective à l'aide de la .inheritedData() méthode si les données attribuées dans le form l'existence de la directive.

Noter que j'ai passé le form contrôleur à l'intérieur de la diffusion dans le myForm directive. Cela garantit que vous recevez le formulaire parent contrôleur qui est de la form élément. Il y a certains cas où vous utiliseriez le myDirective imbriquée à l'intérieur d'un formulaire via ng-form, donc au lieu de mettre form.$setPristine() à la form élément du formulaire de commande, vous seriez réglage de la ngForm forme contrôleur.

DÉMO

  .directive('myForm', function() {

    return {
      require: 'form',
      compile: function(tElem, tAttr) {

        tElem.data('augmented', true);

        return function(scope, elem, attr, form) {
          elem.on('submit', function() {
             scope.$broadcast('form:submit', form);
          });
        }
      }
    };

  })

  .directive('myDirective', function() {
    return {
      link: function(scope, elem, attr) {

        if(!elem.inheritedData('augmented')) {
          return;
        }

        scope.$on('form:submit', function(event, form) {
          console.log('submit');
          form.$setPristine();
        });
      }
    };
  });

1. Une autre façon qui est probablement quelque chose qui est hautement optimisé pour ce cas d'utilisation spécifiques. Pour créer un contrôleur dans le myForm directive qui stocke forme des gestionnaires d'événements pour être itéré lorsqu'un formulaire événement est déclenché. Au lieu d'utiliser le $broadcast angulaire de l'événement qui est en fait plus lentement que la mise en œuvre ci-dessous parce qu'il traverse chaque champ d'application de la form élément jusqu'à la dernière portée de la chaîne. Le myForm contrôleur ci-dessous crée son propre mécanisme pour stocker les gestionnaires d'événements. Tel que mis en œuvre dans le #1, à l'aide de la .data() - inheritedData() est lente lorsque le myDirective est enfoui au plus profond et imbriquée à partir d'un grand nombre d'éléments, puisqu'il traverse la DOM vers le haut jusqu'à ce qu'il trouve spécifiques data. À l'aide de la mise en œuvre ci-dessous, vous pouvez vérifier si le ?^myForm contrôleur existe dans le parent, l'avis de la ? il représente une condition facultative. En outre, la définition de l'étendue de vrai dans le myForm directive permet à la directive réutilisables, par exemple, plusieurs myForm directives à l'intérieur d'une page.

DÉMO

  .directive('myForm', function() {

    return {
      require: ['form', 'myForm'],
      scope: true,

      controller: function() {

        this.eventHandlers = {
          submit: [],
          change: []
        };

        this.on = function(event, handler) {
          if(this.eventHandlers[event]) {
            this.eventHandlers[event].push(handler);
          }
        };

      },

      link: function(scope, elem, attr, ctrls) {
        var form = ctrls[0],
            myForm = ctrls[1];


        angular.forEach(myForm.eventHandlers, function(handlers, event) {
          elem.on(event, function(eventObject) {
            angular.forEach(handlers, function(handler) {
              handler(eventObject, form);
            });
          });
        });

      }

    };

  })

  .directive('myDirective', function() {
    return {
      require: '?^myForm',
      link: function(scope, elem, attr, myForm) {

        if(!myForm) {
          return;
        }

        myForm.on('submit', function(event, form) {
          console.log('submit');
          form.$setPristine();
        });
      }
    };
  });

OriginalL'auteur ryeballar

https://docs.angularjs.org/api/ng/directive/ngSubmit est probablement ce que vous cherchez.

OriginalL'auteur mr-wildcard