角度引导模式口罩形成

我想在范围内的角形式去验证验证等角度引导模式口罩形成

基本情况

让我们说我有以下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