角度引导模态掩码形式 [英] angular bootstrap modal masks forms
问题描述
我试图在范围内获得一个角度形式来验证验证等.
基本案例
假设我有以下 HTML:
<表单名称=fooForm"><textarea ng-model="reason" required=""></textarea></表单><div class='btn btn-primary' ng-click="submit()" ng-class="{'btn-disabled': true}">很棒的提交按钮</div>还有下面的控制器
angular.module('MyAwesomeController', '$scope', function(scope){scope.submit = function(){控制台调试(范围)}})这会起作用，经过检查，scope 将包含一个 fooForm 键.
现在让我们说，我将一个 angular ui bootstrap modal 引入到混合中，如下所示:
破案
<div class="btn btn-primary" ng-click="open()">打开模态</div>使用以下两个控制器:
.controller('AwesomeParentController', ['$scope', '$modal', function(scope, modal){scope.open = 函数(){选项 = {windowClass: '模态不连续模态',templateUrl: 'modal.html',控制器:'AwesomeModalController'}modalInstance = modal.open(options)modalInstance.result.then(function(){console.debug("结果！")})}}]).controller("AwesomeModalController", ['$scope', '$modalInstance', function(scope, modalInstance){scope.submit = function(){控制台调试(范围)}}])使用以下modal.html:
当第一个按钮被点击时，一个模态打开，第二个按钮点击打印一个scope，它不包含fooForm，而是fooForm 驻留在 scope.$$childTail
Plunkr:http://embed.plnkr.co/jFGU0teIbL3kUXdyTPxR/preview
可能的修复
</表单>.controller('JankyFormController', ['$scope', function(scope){scope.models['fooForm'] = scope.fooForm}])
Plunkr:http://embed.plnkr.co/BAZFbS7hFRhHm8DqOpQy/preview
为什么表单被屏蔽了?无需创建嵌套子控制器即可获得它的干净方法是什么?如果我想将 ng-class 绑定到表单有效性怎么办?我现在是否必须围绕 ($$childTail).fooForm.$valid 构建一个监视?
更新: angular ui-bootstrap 0.12.0 修复了这个问题 - 嵌入范围与控制器的范围相同，不需要 <代码>$parent..只需升级.
0.12.0 之前:
Angular-UI 模态使用嵌入来附加模态内容，这意味着在模态中创建的任何新范围条目都在子范围中创建.这发生在表单指令中.
这是已知问题:https://github.com/angular-ui/bootstrap/issues/969
我提出了对我有用的快速解决方法，Angular 1.2.16:
userForm 在模态控制器 $scope 中创建并可用.感谢范围继承 userForm 访问在标记中保持不变.
<div ng-class="{'has-error': userForm.email.$invalid}"}>I am trying to get at an angular form in scope to verify validations etc.
Base Case
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>
And the following controller
angular.module('MyAwesomeController', '$scope', function(scope){
scope.submit = function(){
console.debug(scope)
}
})
This will work, and upon inspection, scope will contain a fooForm key.
Let us now say that I introduce an angular ui bootstrap modal into the mix like so:
Broken Case
<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)
}
}])
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>
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/preview
Possible Fix
<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
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?
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.
Before 0.12.0:
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.
This is known issue: https://github.com/angular-ui/bootstrap/issues/969
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}"}>
这篇关于角度引导模态掩码形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
