7

我使用AngularJS版本1.0.5和Angular UI(Bootstrap)0.4.0。 我想集成2個功能:UI的選項卡和Angular的形式。AngularJS和用戶界面 - 無法在標籤內部訪問表單外部

我有嵌套窗體。 一種形式(outerForm)包裝整個標籤集。 另一種形式(innerForm)駐留在一個選項卡中。

我想要一個按鈕,在選項卡之外,根據innerForm的有效性啓用\禁用!

當我嘗試從表單本身外部訪問innerForm。$ valid時,它不起作用。

這裏是一個plunker: http://plnkr.co/edit/sEz8TG?p=preview

現在,當我嘗試定期引導一樣,它似乎工作: http://plnkr.co/edit/Somic4?p=preview

當內部形式駐留在常規的DIV內,我可以從外面訪問它。 當我使用Angular UI的特殊'tab'語法時,它不再起作用。

回答

5

tabset指令生成的本地範圍不屬於您的外部表單範圍。

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

在該不工作的示例中,您的內和外形式的屬性是相同的範圍內。爲了證明這一點,我刪除了外部標籤集和標籤標籤指令show here,它的工作原理。當用tabset指令包圍標記時,會生成一個新的隔離範圍,innerForm是其中的一部分。

爲了解決這個問題,您可以在表單中進行$ watch的更改,後跟$ emit()(http://docs.angularjs.org/api/ng。$ rootScope.Scope),以便與內部作用域的外部範圍通信並更改值和有效性。

如果您使用的是Chrome,得到了Batarang extension它會告訴你你的範圍層次結構

+0

此外,還要確保你升級到最新的角度引導。 https://github.com/angular-ui/bootstrap/issues/574標籤編譯被修復,這導致了我們在標籤內部的表單元素上出現奇怪行爲時遇到的幾個問題。 –

+0

另一種選擇是將「form」對象本身的容器移動,如下所示:http://stackoverflow.com/questions/19568761/can-i-access-a-form-in-the-controller。如果你只是尋找一種簡單的方式從基本控制器訪問表單,儘管tabset - 這是最簡單的選項。 –