Scenario
I am relatively new to Angular and facing a specific challenge.
The goal is to make a directive change the color and add an image to a button. However, I am struggling to get the first if condition to work in my Angular Directive.
Issue
The objective is for the directive to take action based on the outcome of the ng-click handler. Despite confirming that the directive is being invoked through debugging, I'm unable to trigger the first if condition.
Inquiries
1) What steps should I follow to resolve this issue?
2) Should I be concerned about the sequence of events where ng-click might not be called before the directive execution?
HTML Markup
<button class="email-reset-btn" type="button" ng-click="resetEmailLink();" emailReset="changeBtn();" name="button">Email Reset Link</button>
Scope Function
var emailResetValidation = function () {
if($('#email').val().trim() == "")
{
$(".email-reset-btn").removeClass("email-active-green");
}
}
Custom Directive
.directive('emailReset', [function(){
return {
link: function(scope, elem, attrs) {
elem.bind("click", function(){
if(!elem.hasClass('email-active-green')) { <--- This is where I expect the debugger to enter to modify the button's HTML content
elem.html("<div class='email-sent-placeholder'><img width='15px' src='./resources/icons/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6108020e0f3e020904020a2153194f110f06">[email protected]</a>'/></div> <div class='email-reset-button-text'>Link Sent</div>");
}
else {
elem.html("Email Reset Link");
}
})
}
});