角引导模式面具形式面具、形式、模式
我想在范围内的角形式去验证验证等。
I am trying to get at an angular form in scope to verify validations etc.
基本案例
让我们说我有以下HTML：
Let us say I have the following 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)
}
})
这将工作，经查，范围将包含 fooForm 键。
This will work, and upon inspection, scope will contain a fooForm key.
现在，让我们说，我介绍一个角度UI引导模式到像这样的搭配：
Let us now say that I introduce an angular ui bootstrap modal into the mix like so:
破碎案例
<body ng-controller="AwesomeParentController">
<div class="btn btn-primary" ng-click="open()">Open the Modal</div>
</body>
用下面的两个控制器：
with the following two controllers:
.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：
with the following modal.html:
<form name="fooForm">
<textarea ng-model="reason" required=""></textarea>
</form>
<div class='btn btn-primary' ng-click="submit()">Awesome Submit Button</div>
当点击第一个按钮，一个模式打开后，第二个按钮点击打印范围，其中不包含 fooForm ，而 fooForm 驻留在范围。$$ childTail
When the first button is clicked, a modal opens, the second button click prints a scope, which does NOT contain fooForm, rather fooForm resides on scope.$$childTail
Plunkr： http://embed.plnkr.co/jFGU0teIbL3kUXdyTPxR/$p$pview
可能的修正
<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/$p$pview
为什么要进行屏蔽的形式？这将是一个干净的方式得到它，而无需创建一个嵌套的子控制器？如果我想纳克级绑定到表格的有效性？我现在要围绕建设的手表（$$ childTail）.fooForm。$有效？
Why is the form being masked? What would be a clean way to get at it without having to create a nested child controller? what if I want to bind ng-class to the forms validity? Would I now have to construct a watch around ($$childTail).fooForm.$valid?
推荐答案
更新：角UI的引导0.12.0解决了这个问题 - transclusion范围变得与控制器的范围，没有必要 $父。。只要升级。
Update: angular ui-bootstrap 0.12.0 fixes the problem - transclusion scope becomes the same as controller's scope, no need for $parent.. Just upgrade.
之前0.12.0
角UI情态动词使用transclusion附加模式的内容，这意味着模态之内所做的任何新范围条目儿童范围内创建。这种情况与形式的指令。
Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.
这是已知问题： https://github.com/angular-ui/bootstrap /问题/ 969
我提出的解决方法快速而对我的作品，具有角1.2.16：
I proposed the quick workaround which works for me, with Angular 1.2.16:
<form name="$parent.userForm">
的窗体创建和模式的控制器可用 $范围。由于范围继承窗体访问在标记保持不变。
The userForm is created and available in modal's controller $scope. Thanks to scope inheritance userForm access stays untouched in the markup.
<div ng-class="{'has-error': userForm.email.$invalid}"}>
