I have a task in my AngularJS application that involves the following steps:
1) Click on a button.
2) If variableA is true, display a modal.
3) If variableA is false, redirect to another link without showing a modal.
Here is the code I am using to achieve this:
HTML:
<span id="id1" ng-click="getClickType($event,row)" href=""> Text </span>
JS:
$scope.getClickType = function(event,row){
$scope.activeElement = event.target;
if(row.type == "A"){
$scope.activeElement.dataset.target = "#ModalA";
$scope.activeElement.dataset.toggle = "modal";
/* No hack needed, modal pops up automatically */
}
else{
someFunction().then(someOtherFunction);
}
}
someOtherFunction(msg){
if (msg.varA == true){
var f1 = $scope.activeElement.dataset.target; //hack
$scope.activeElement.dataset.target = "#ModalB";
$scope.activeElement.dataset.toggle = "modal";
if( f1 != $scope.activeElement.dataset.target){ //hack If statement
$timeout(function () {
$scope.activeElement.click();
});
/* Hack needed to click on the element again to show the modal */
}
}
else{
$scope.activeElement.dataset.target = "";
$scope.activeElement.dataset.toggle = "";
window.open(someURL);
/* Works fine without needing to click again */
}
}
As you can see, I am using a workaround for ModalB. Changing the dataset.target in someOtherFunction() doesn't show the modal, requiring a click on the active element again.
My question is:
Why do I have to click on the activeElement again to change the data target.
Why is this only necessary in the second function.
Any insights would be greatly appreciated.
Thank you in advance.