AngularJS: Appel de la ng-présenter l'événement à l'extérieur de la forme

Veuillez entourer votre code avec un ng-controller, et l'utilisation ng-cliquez sur les boutons les hors de portée des <form>.

Je fais un échantillon sur jsfiddle pour vous... l'essayer:

http://jsfiddle.net/xKkvj/2/

<div ng-app>
    <div ng-controller="Ctrl">
        <form ng-submit="submit()">Enter text and hit enter:
            <input type="text" ng-model="text" name="text" />
            <input type="submit" id="submit" value="Submit" /> <pre>list={{list}}</pre>
        </form>
        <button ng-click="submit()">Submit 2</button>
    </div>
</div>

avec js:

function Ctrl($scope) {
    $scope.list = [];
    $scope.text = 'hello';
    $scope.submit = function () {
        if ($scope.text) {
            $scope.list.push($scope.text);
            $scope.text = '';
        }
    };
}

C'est de loin la solution la plus propre que j'ai trouvé, tous les crédits vont à @Offereins https://stackoverflow.com/a/23456905/3819736

<form ng-submit="vm.submit()">
    <input type="text" name="name" />
    <input type="submit" id="submit-form" class="hidden" />
</form>
<label for="submit-form">
    <button type="submit">submit</button>
</label>

Cette méthode ne nécessite pas de contrôleur supplémentaire JS ou autre jQuery tweaks.

Voici mon code de test. Le contrôleur qui dispose de la méthode de login est déjà appelé!

<form ng-submit="login()" id="form-test" name="formTest">
    <input type="text" name="username">
    <br>
    <input type="password" name="userpass">
    <br>

    <!-- works -->
    <input type="submit" value="submit inside" id="test">
</form>

<!-- change the path from /#/login to /?username=aaa&userpass=aaa#/login and reloads the page-->
<button type="submit" onclick="$('#form-test').submit();">submit outside (jquery)</button> 

<!-- doesn't work -->
<button type="submit" ng-click="formTest.submit()">submit outside (ng-click)</button> 

Réponse courte Regardez http://jsfiddle.net/84bodm5p/

Moyen le plus facile pour moi de créer directive spéciale pour l'extérieur la soumission.

Important utilisez uniquement le droit d'événement .triggerHandler('submit') sur l'élément de formulaire

$scope.$on('makeSubmit', function(event, data){
              if(data.formName === $attr.name) {
                $timeout(function() {
                  $el.triggerHandler('submit'); //<<< This is Important

                  //equivalent with native event
                  //$el[0].dispatchEvent(new Event('submit')) 
                }, 0, false);   
              }
            })

Regarde ma réponse ici Comment déclencher soumettre le formulaire par programmation dans AngularJS?

Il y a une solution qui fonctionne pour moi:

http://jsbin.com/ODaFaGU/3/edit

Découvrez la PARTIE 2 et PARTIE 3.

Il y a deux solutions à l'intérieur.

Un pour la forme régulière soumettre les boutons, il vous permet de vous appuyez sur les boutons sans retard, mais assure également que l'appui sur la touche "entrée" dans l'un des champs du formulaire de déclencher une soumettre.

Deuxièmement, il y a un supplément de gestionnaire d'événements qui combine le clic, appuyez sur et keydown[enter] événements en un seul - ce qui garantit que vous pouvez frapper vos commandes avec le clavier, comme avec un clic sur le bureau, et un tap sur le mobile(sans toucher le cliquez deux fois) les appareils.

Si vous avez des problèmes avec cela, donnez-moi un commentaire, je vais le corriger.