how to access element in directive? - html

Question

I have a html page in which there is a directive(child html) inside as below. I want to do input validation of input1 and input2 in directive(child html) for the button in parent html, but I don't know how I can access the input1 and input2 in child (directive). I would like to know what is the right way to access input1 and input2? Thanks in advance!!
Parent html:
<div>
<child></child>
<button name="myButton" ng-disabled="????.myForm.input1.$invalid"><button>
</div>
Directive: child
<form name="myForm">
<input name="input1" required/>
<input name="input2" required/>
</form>

Answer 1

Try this:
Parent controller:
vm.myForm = {};
Parent Html:
<child my-form="vm.myForm"></child>
<button name="myButton" ng-disabled="vm.myForm.input1.$invalid"><button>
Child directive:
scope: {
myForm: "="
}
Child HTML:
<form name="myForm">
<input name="input1" required/>
<input name="input2" required/>
</form>

Answer 2

You can $emit event to your parent controller and pass needed data.
Directive:
$scope.$emit('yourCustomEvent', 'Data to send');
And catch the event in you parent controller.
Parent controller:
$scope.$on('yourCustomEvent', function (event, data) {
console.log(data); // will print "Data to send"
});
And in your case I advice you to include the button in your directive, it will be much easier to work with it.