AngularJS & Пользовательский интерфейс - не может получить доступ к форме снаружи, когда внутри вкладки

Я использую AngularJS версии 1.0.5 и Angular UI (Bootstrap) 0.4.0. Я пытаюсь объединить 2 функции: вкладки пользовательского интерфейса и формы Angular.

У меня есть вложенные формы. Одна форма (externalForm) охватывает весь набор вкладок. Другая форма (innerForm) находится на одной вкладке.

Я хочу иметь кнопку вне вкладок, которая будет включена \ отключена в соответствии со сроком действия innerForm !

Когда я пытаюсь получить доступ к innerForm. $ valid извне самой формы, он не работает.

Вот плункер: http://plnkr.co/edit/sEz8TG?p=preview

Теперь, когда я пытаюсь сделать то же самое с обычной Bootstrap, похоже, она работает: http://plnkr.co/edit/Somic4?p=preview

Когда внутренняя форма находится внутри обычного элемента div, я могу получить к ней доступ извне. Когда я использую специальный синтаксис «tab» в Angular UI, он больше не работает.

7 голосов | спросил Daniel Wolf 26 J0000006Europe/Moscow 2013, 20:15:15

1 ответ


0

Директива tabset создает локальную область, которая не является частью вашей внешней формы.

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

В примере, который работает, ваши внутренние и внешние свойства формы находятся в одной области видимости. Чтобы доказать это, я удалил внешние директивы tabset и tag tab, показать здесь , и это работает. Когда вы окружаете разметку директивами tabset, создается новая изолированная область, частью которой является innerForm.
.

Чтобы исправить это, вы можете сделать $ watch для отслеживания изменений в форме, после чего следует $ emit () ( http: //docs.angularjs.org/api/ng . $ rootScope.Scope), чтобы сообщить внешней области изменения внутренней области значений и допустимости.

Если вы используете Chrome, получите расширение Batarang , которое покажет Вы ваши иерархии области

ответил mitch 26 J0000006Europe/Moscow 2013, 22:37:20

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132