Menu
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.
613
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write.
Angular uses TypeScript and has components as its main building blocks. It is component-based, whereas AngularJS uses directives. Angular's operation employs a hierarchy of components, while AngularJS has directives that allow code reusability. So, The AngularJS framework provides reusable components for its users.
As Angular uses TypeScript, it executes faster than PHP when measured on a single hardware. However, as it primarily works on the client-side, if a user's machine isn't powerful enough, so will Angular's performance.
JavaScript has an extensive user interface that includes sliders and other features. On the other hand, AngularJS is a data-driven framework that's used to create web applications. JavaScript is a powerful and complex programming language. On the other hand, AngularJS is a simple and effective framework.
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
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
