AngularJS & UI - Can't access form outside when inside tab

7
votes

I'm using AngularJS version 1.0.5 and Angular UI (Bootstrap) 0.4.0. I'm trying to integrate 2 features: the tabs of the UI and the forms of Angular.

I have nested forms. One form (outerForm) wraps the whole tabset. The other form (innerForm) resides within one tab.

I want to have a button, outside of the tabs, that will be enabled\disabled according to the validity of the innerForm!

When I try to access innerForm.$valid from outside the form itself, it does not work.

Here is a plunker: http://plnkr.co/edit/sEz8TG?p=preview

Now, when I try the same with regular Bootstrap, it does seem to work: http://plnkr.co/edit/Somic4?p=preview

When the inner form resides within a regular div, I can access it from outside. When I use the special 'tab' syntax of Angular UI, it does not work anymore.

1
twitter-bootstraptabsnestedangular-uiangular-ui-bootstrap

1 Answers

5
votes

The tabset directive is generating a local scope which isn't part of your outer forms scope.

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

In the example that does work, your inner and outer form properties are within the same scope. In order to prove this, I stripped out the outer tabset and tab tag directives show here and it works. When you surround the markup with tabset directives, a new isolated scope is generated in which innerForm is part of.
.

To fix this, you can do a $watch for changes in the form followed by an $emit() (http://docs.angularjs.org/api/ng.$rootScope.Scope) to communicate to the outer scope of the inner scope change in values and validity.

If you are using Chrome, get the Batarang extension which will show you your scope hierarchies