I'm having trouble updating the ng-if in my HTML code below:
<div id="shyBoxII" ng-if="robot.robot" ng-class="background">
<div class="row"><i class="fa fa-user-plus"></i></div>
<div class="row"><i class="fa fa-book"></i></div>
<div class="row"><i class="fa fa-video-camera"></i></div>
<div class="row"><i class="fa fa-volume-up"></i></div>
</div>
Even though in my controller, when I console log robot.robot, it returns as true. However, the element with the id #shyBoxII still doesn't show up. What could be causing this issue?
$scope.pinActiveSection = function ($event,section) {
var $element = $(".table-hover tr."+section+"");
console.log($event, section);
if($element.children(":first").hasClass("unlock")){
$(".table-hover tr:not(."+section+")").fadeOut( "slow", function() {
$(this).remove();
$element.parent().parent().parent().css("top", "10%");
$element.parent().parent().parent().css("padding", "0%");
$scope.activeSection.activeSection = section;
$scope.robot.robot = true;
console.log($scope.robot.robot);
if($scope.activeSection == "I")
{
$scope.background.push("I");
$scope.background.push("show");
}
});
}
else{
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
$element.children(":first").animateCss('bounce');
}
};
To clarify, even though $scope.pinActiveSection is being executed and I can see that $scope.robot.robot is set to true, the view isn't updating accordingly. If I move $scope.robot.robot outside of the if block, it works fine, but I want it inside the fadeOut callback. Any suggestions or insights on what might be going wrong here?
Edit: Interestingly, when I trigger pinActiveSelection twice consecutively, the #shyBoxII appears after the second run. Does this behavior offer any clues as to why it's not working correctly on the first run?