AngularJS & UI - Impossibile accedere al modulo esterno quando si trova all'interno della scheda

Question

Utilizzo AngularJS versione 1.0.5 e Angular UI (Bootstrap) 0.4.0. Sto cercando di integrare 2 funzionalità: le schede dell'interfaccia utente e le forme di Angolare.

Ho moduli nidificati. Un modulo (outerForm) avvolge l'intero tabset. L'altro modulo (innerForm) risiede in una scheda.

Desidero avere un pulsante, al di fuori delle schede, che sarà abilitato \ disabilitato in base alla validità dello innerForm!

Quando provo ad accedere a innerForm. $ Valido dall'esterno del modulo stesso, non funziona.

Ecco una plunker: http://plnkr.co/edit/sEz8TG?p=preview

Ora, quando provo lo stesso con regolare Bootstrap, sembra funzionare: http://plnkr.co/edit/Somic4?p=preview

Quando la forma interna risiede all'interno di un div regolare, posso accedervi dall'esterno. Quando uso la sintassi 'tab' speciale dell'interfaccia utente angolare, non funziona più.

Answer 1

La direttiva tabset sta generando un ambito locale che non fa parte dell'ambito dei moduli esterni.

https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#L78

Nell'esempio che funziona, le proprietà forma interna ed esterna sono nello stesso ambito. Per dimostrarlo, ho rimosso le etichette esterne del tabset e del tag tab show here e funziona. Quando si circonda il markup con le direttive tabset, viene generato un nuovo ambito isolato di cui innerForm fa parte.
.

Per risolvere questo problema, è possibile eseguire un $ watch per le modifiche nel modulo seguito da $ emit() (http://docs.angularjs.org/api/ng. $ RootScope.Scope) per comunicare all'ambito esterno della modifica dell'ambito interno in valori e validità.

Se si utilizza Chrome, ottenere il Batarang extension che vi mostrerà la vostra portata gerarchie