Angular.js - gibt Formularvalidierung irgendwelche Ereignisse aus?

Question

Das Problem ist, ich benutze Ui-Router und ich habe zwei Ansichten, eine ist eine Art Symbolleiste, zweite ist Inhalt mit einem Formular.

Jetzt würde ich gerne eine Schaltfläche zum Speichern in der Symbolleiste haben, die deaktiviert wäre, wenn Formular nicht $valid wäre. Aber diese beiden sind auf ganz andere Bereiche, es ist wie:

• rootScope
  • Symbolleiste Umfang
  • Inhalt Umfang (mit form.$valid)

Also dachte ich, ich würde Sie können damit umgehen, indem Sie auf eine Art von $ valid-Ereignissen warten, die vom Formular ausgegeben werden.

Nach dem, was Vojta sagte here diese Ereignisse existieren sollte, aber ich kann sie nicht überall angegeben finden .. und bei this Suche ich sehe keine Ereignisse ..

ich wahrscheinlich

tun könnte

$scope.$watch('form.$valid', function(newVal, oldVal) { 
    $scope.$emit('validityChange', {'form':newVal}); 
}); 

aber es fühlt sich an wie Ereignisse mit, anstatt dies würde

besser Oder sollte ich versuchen, etwas ganz anderes? Beachten Sie, dass ich die UI-Ansicht der Symbolleiste nicht in die UI-Ansicht des Inhalts einfügen kann und entsprechend this, zwei UI-Ansichten können einfach nicht den gleichen Bereich haben.

Answer 1

Um die Frage direkt zu beantworten: Ich kenne nicht native Formularereignisse in angularjs. Aber wie Sie wissen, können Sie Ihre eigenen Ereignisse leicht erstellen, und das würde Ihr Problem lösen.

Aber hier ist mein Vorschlag: Sie versuchen, zwei Controller miteinander kommunizieren zu machen. Die Verwendung von Ereignissen kann der falsche Ansatz sein. Ereignisse sollten wirklich für anwendungsweite Benachrichtigungen wie die Authentifizierung verwendet werden.

Sie können das Formular umformulieren und in zwei Direktiven senden, die denselben Controller verwenden. Obwohl sie keinen Bereich teilen, teilen sie sich ein Controller-Objekt, das für die Kommunikation verwendet werden kann. Ich würde es so machen.

Ein anderer Ansatz besteht darin, die beiden Bereiche ineinander zu verschachteln. Verschieben Sie den Formularcode in einen übergeordneten Controller. Wie folgt aus:

• rootScope
  • Haupt // Formular Code hier
    • Symbolleiste // Submit-Button hat Zugriff auf Funktionalität
    • Inhalt // Form Zugriff auf Funktionen hat

Hoffe das hilft!

Answer 2

Unter der Annahme, sowohl Ihre Ansichten müssen verschiedene Zustände werden müssen, und beide sind in der gleichen Haupt-Controller und Haupt HTML-Seite, können Sie deren Zustand Namen zusammen mit ng-wenn Ihr Zustand angeben können.

Sagen wir "Inhalt" Zustand ist für Ihre Inhaltsansicht.

Jetzt in Ihrem HTML div-Tag, das die Symbolleiste enthält, erwähnen einen Zustand etwas in Ihrem speichern Tastenfeld, ähnlich wie diese heißt

ng-if = $state.current.name === 'content' && 'nameOfYourForm'.$valid 

Wenn diese Bedingung erfüllt ist, bedeutet indirekt Ihre Form gültig ist .

Allerdings werden Sie dies in der run-Methode zu schreiben, die auf der gleichen js-Datei als Moduldeklaration nämlich erklärt werden sollten.

angular.module('nameOfModule' , ['dependency1', ..]). run(run) 

Und dann in der run-Methode, den $ rootScope und $ Zustand injiziert, und erklären, und es wie folgt zu definieren:

function run(stateHandler, .. ,$rootScope, $state) { 
    $rootScope.$state = $state; 
}