CODEWITHSUNDEEP
javascriptangularjs
bhawkeswood
bhawkeswood

Reputation: 680

Ng-show only updating on interaction

I've been chugging along in my project with Angular (pretty new to it), having no major issues, but have bumped into something I can't figure out.

I have a form to allow a user to create an account. Throughout the form I have error messaging for places where the form could contain errors (eg. Password not long enough, etc.) In every single area but one, the template updates as I expect it would, not only on this form but on other form in the project.

The offender is this guy:

<div id="account-exists" ng-if="createAccountForm.$valid">
    <span class="error" 
        ng-show="error301" 
        translate>
        general.validations.account_exists
    </span>
</div>

With the ng-if the div is properly inserted into the DOM with the child span intact, however it still contains the ng-hide class. The error301 is a boolean I'm setting on the scope based on data returned from the server, and using the dev tools can see that it is in fact being updated to true where I expect it to. The thing is, the template does not update automatically to display the error. It WILL however update if clicked.

I assumed, $scope.$apply() could help, but it freezes the template. Inspecting the DOM reveals that it DOES help in the sense that it behaves behind the scenes as expected, the JS code in the controller still runs, and the DOM is updated correctly. Is there anything obvious in my template I'm missing? Specifically, why would it update with a click? And has anyone experienced the template freezing on a $scope.$apply()?

Upvotes: 0

Views: 173

Answers (2)

bhawkeswood
bhawkeswood

Reputation: 680

Definitely doesn't solve the underlying issues that $scope.$apply() is causing with the freezing of the template, but I was at the very least able to get around the issues with this singular error by straight-up manipulating the DOM with document.getElementById("account-exists").classList.remove("ng-hide"); in order to remove the ng-hide that was not being removed without the activation of the digest cycle.

I'd prefer to know why this was happening in the first place, but for now, it's nice to know that as a work-around, this serves my purpose, and that as far as toggling the status of the error I can simply target the element and remove("ng-hide"); or add("ng-hide"); when need be.

Upvotes: 1

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 2683

Maybe it works if you use an object. I can't explain why, but in my expirience it helps.

ng-show="errors.error301"

and then in the controller

$scope.errors = {
   error301:false
}
...
...
...
$scope.errors.error301 = true;

Upvotes: 0

Related Questions