角度引導模式口罩形成

我想在範圍內的角形式去驗證驗證等角度引導模式口罩形成

基本情況

讓我們說我有以下HTML：

<body ng-controller='MyAwesomeController'> 
    <form name="fooForm"> 
    <textarea ng-model="reason" required=""></textarea> 
    </form> 
    <div class='btn btn-primary' ng-click="submit()" ng-class="{'btn-disabled': true}">Awesome Submit Button</div> 
</body>

而下面的控制器

angular.module('MyAwesomeController', '$scope', function(scope){ 
    scope.submit = function(){ 
     console.debug(scope) 
    } 
})

這將工作，並在檢查後，scope將包含一個fooForm密鑰。

現在讓我們說，我介紹了一個角的用戶界面引導模式混進去，像這樣：

損壞的案例

<body ng-controller="AwesomeParentController"> 
    <div class="btn btn-primary" ng-click="open()">Open the Modal</div> 
</body>

以下兩個控制器：

.controller('AwesomeParentController', ['$scope', '$modal', function(scope, modal){ 
    scope.open = function(){ 
    options = { 
     windowClass: 'modal discontinue-modal', 
     templateUrl: 'modal.html', 
     controller: 'AwesomeModalController' 
    } 
    modalInstance = modal.open(options) 

    modalInstance.result.then(function(){ 
     console.debug("result!") 
    }) 
    } 
}]) 

.controller("AwesomeModalController", ['$scope', '$modalInstance', function(scope, modalInstance){ 
    scope.submit = function(){ 
    console.debug(scope) 
    } 
}])

與以下modal.html：

<form name="fooForm"> 
    <textarea ng-model="reason" required=""></textarea> 
</form> 
<div class='btn btn-primary' ng-click="submit()">Awesome Submit Button</div>

當點擊第一個按鈕，一個模式打開後，第二個按鈕點擊打印scope，不含fooForm，而fooForm駐留在scope.$$childTail

Plunkr：http://embed.plnkr.co/jFGU0teIbL3kUXdyTPxR/preview

可行解決

<form name="fooForm"> 
    <div ng-controller ="JankyFormController"> 
    <textarea ng-model="reason" required=""></textarea> 
    <div class='btn btn-primary' ng-click="submit()">Awesome Submit Button</div> 
    </div> 
</form> 

.controller('JankyFormController', ['$scope', function(scope){ 
    scope.models['fooForm'] = scope.fooForm 
}])

Plunkr：http://embed.plnkr.co/BAZFbS7hFRhHm8DqOpQy/preview

爲什麼窗體被遮罩？無需創建嵌套的子控制器，乾淨的方式是什麼？如果我想將ng-class綁定到表單有效性怎麼辦？我現在需要在($$childTail).fooForm.$valid附近建造一個手錶嗎？

來源

2014-03-06 Abraham P

更新：角度ui-bootstrap 0.12.0修復了問題 - 跨接範圍變得與控制器的範圍相同，不需要$parent.。只需升級。

之前0.12.0：

角UI情態動詞使用transclusion附加模式的內容，這意味着模內所做的任何新範圍項中的兒童範圍內創建。這發生在form指令中。

這是已知的問題：https://github.com/angular-ui/bootstrap/issues/969

我提出的解決方法快，其工作對我來說，具有角1.2。16：

<form name="$parent.userForm">

的userForm創建和提供模式的控制器$scope。感謝範圍繼承userForm訪問在標記中保持不變。

<div ng-class="{'has-error': userForm.email.$invalid}"}>

來源

2014-04-13 15:56:31 gertas

太棒了！在http://stackoverflow.com/a/26118028/2173380上的相關問題中引用了你的答案，但是如果你在那裏回答，我會選擇正確的答案:) – Jago

很快會有新版本通過合併作用域來修復問題。 – gertas

這仍然工作？ – Jago