Trying to access an angular form within scope for validation purposes.
Initial Scenario
Consider 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 this controller:
angular.module('MyAwesomeController', '$scope', function(scope){
scope.submit = function(){
console.debug(scope)
}
})
In this setup, scope will contain a fooForm key upon inspection.
Now, introducing an angular ui bootstrap modal:
Issue Scenario
<body ng-controller="AwesomeParentController">
<div class="btn btn-primary" ng-click="open()">Open the Modal</div>
</body>
with these 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)
}
}])
including 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, the modal opens. Clicking the second button prints a scope, which surprisingly does NOT contain fooForm; instead, fooForm resides on scope.$$childTail.
Plunkr: http://embed.plnkr.co/jFGU0teIbL3kUXdyTPxR/preview
Possible Solution
<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 hidden? What would be a neat way to access it without creating a nested child controller? How can I bind ng-class to the forms validity without adding a watcher for ($$childTail).fooForm.$valid?