I have this piece of HTML:
:
:
<td ng-if="Curr_State == 'Edit' && This_Page.Data_Changed == false" style="max-width:300px">
<button type="button"
class="FD"
ng-click="Initiate_Append_to_JobCard()"
style="height:80px;width:180px;white-space:normal;background:green;padding:10px">
<font size="3" class="ng-binding">Append{{All_Labels.Common.Append}}
</font>
<font size="2">
{{This_Page.Append_Get_Number}}
<table id="Get_Append_Count_an_Execute" ng-if="This_Page.Append_Get_Number == 'Y'">
<tbody>
<tr>
<td>
<label for="Append_Number"> #:</label>
</td>
<td>
<input string-to-number
id="Append_Number"
type="number"
class="form-control"
ng-model="This_Page.Append_Number"
min="0"
step="1"
style="width:70px;margin:0px">
</td>
<td>
<button class="btn btn-success"
ng-click="Do_Append()"
title="Proceed with Append"
type="button">
<font size="2" color="white">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</font>
</button>
</td>
<td>
<button class="btn btn-danger"
ng-click="Cancel_Append()"
title="Cancel Append request"
type="button">
<font size="2" color="white">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</font>
</button>
</td>
</tr>
</tbody>
</table>
</font>
</button>
</td>
:
:
and the following two functions within the controller:
$scope.Initiate_Append_to_JobCard = function() {
$scope.This_Page.Append_Get_Number = "Y" ;
}
//////////////////////////////////////////////////////////////////
$scope.Cancel_Append = function() {
$scope.This_Page.Append_Get_Number = "N" ;
$scope.This_Page.Append_Number = null ;
}
When the outer button is clicked, $scope.This_Page.Append_Get_Number is set to "Y" and the inner objects are properly shown.
When the Cancel button is clicked, the function $scope.Cancel_Append is invoked, the value of $scope.This_Page.Append_Get_Number is set to "N" (first statement of the function) but this change is not propagated towards the HTML. In fact, I added {{This_Page.Append_Get_Number}} which shows initially N, then Y and it then remains unchanged no matter how many times I click on the cancel button.
<button type="button"
class="FD"
ng-click="Initiate_Append_to_JobCard()"
style="height:80px;width:180px;white-space:normal;background:green;padding:10px">
<font size="3" class="ng-binding">Append{{All_Labels.Common.Append}}
</font>
<font size="2">
{{This_Page.Append_Get_Number}} </font></button>
<table id="Get_Append_Count_an_Execute" ng-if="This_Page.Append_Get_Number == 'Y'">
If the table should be inside the button itself, then the click event on the Cancel button will bubble up to the Append button, which will close and open again.
You need to add a
event.stopPropagation()
in your cancel function and also pass the $event to that function
https://embed.plnkr.co/CEHNggASaVGqkqfamdEx/
When you have an element inside another element and an event occurs on the innermost element (the click event here), then the event is processed by that element and then it is passed up the DOM hierarchy to all the ancestor elements that have a listener for that event and processed by each one.
Here you have a button inside a button, with click event listeners on both. When the inner button (Cancel) is clicked, the listener (Cancel_Append) processes the event (changes the value to N) and then passes the click to the parent/outer button where the listener (Initiate_Append_to_JobCard) processes the event and changes the value to Y again.
Since these happen at almost the same time, we cant see the difference. It can be seen by adding a 'console.log($scope.This_Page.Append_Get_Number)' to both the functions.
To prevent the bubbling of the event, we need to cancel the propagation after the event has been handled. So we need to pass the $event object from the HTML and then after the event is processed by the "Cancel_Append", we need to stop propagating the event further up the DOM using the event.stopPropagation().
Take a look at this link for a better understanding of event bubbling