Angular.js - la convalida del modulo emette eventi?

Question

Il problema è che sto usando ui-router e ho due viste, una è una specie di barra degli strumenti, la seconda è il contenuto di un modulo.

Ora mi piacerebbe avere un pulsante di salvataggio nella barra degli strumenti, che sarebbe disabilitato se il modulo non fosse $valid. Ma quei due sono su completamente diversi ambiti, è come:

• rootScope
  • portata barra degli strumenti
  • portata dei contenuti (con form.$valid)

Così ho pensato di affrontalo ascoltando qualche tipo di $ eventi validi emessi dal modulo.

Secondo quanto ha detto Vojta dovrebbero esistere here quegli eventi, ma non riesco a trovarli da nessuna parte .. specificati e guardando this non vedo alcun evento ..

probabilmente avrei potuto fare

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

ma ci si sente come l'utilizzo di eventi piuttosto che questo sarebbe meglio

O dovrei provare qualcosa di completamente diverso? Nota che non posso mettere la vista ui della barra degli strumenti all'interno della vista ui del contenuto .. e in base a this, due viste ui semplicemente non possono avere lo stesso ambito.

Answer 1

Per rispondere direttamente alla domanda: Non sono a conoscenza di eventi di tipo nativo in angularjs. Ma, come sai, puoi creare facilmente i tuoi eventi e questo risolverebbe il tuo problema.

Ma ecco il mio suggerimento: Si sta tentando di far comunicare due controller tra loro. Utilizzare gli eventi potrebbe essere l'approccio sbagliato. Gli eventi dovrebbero essere effettivamente utilizzati per notifiche a livello di applicazione come l'autenticazione.

È possibile rifattorizzare il modulo e inviare il pulsante in due direttive che condividono lo stesso controller. Sebbene non condividano un ambito, condivideranno un oggetto controller che può essere utilizzato per comunicare. Lo farei in questo modo.

Un altro approccio consiste nel nidificare i due ambiti l'uno nell'altro. Sposta il codice del modulo in un controller di livello superiore. Come questo:

• rootScope
  • principale codice // modulo qui
    • toolbar // pulsante di invio ha accesso alle funzionalità
    • contenuti // modulo è l'accesso alle funzionalità

Spero che ti aiuti!

Answer 2

Supponendo che entrambe le viste debbano avere stati diversi e che entrambi siano nello stesso controller principale e nella pagina HTML principale, è possibile utilizzare i loro nomi di stato insieme a ng-se per specificare la condizione.

Diciamo che lo stato "" è per la vista del contenuto.

Ora nel tuo tag div HTML che contiene la barra degli strumenti, citare una condizione qualcosa nel tuo Salva campo pulsante, simile a questo esempio

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

Se questa condizione è soddisfatta, significa indirettamente il vostro modulo è valido .

Tuttavia, è necessario scrivere questo nel metodo di esecuzione, che deve essere dichiarato sullo stesso file js della dichiarazione di dichiarazione del modulo.

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

E poi nel vostro metodo di esecuzione, iniettare il $ rootScope e $ Stato, e dichiarare e definire in questo modo:

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