goodCoder goodCoder - 1 year ago 73
AngularJS Question

Why ng-show does not work properly?

why ng-show doesn't work properly?
I have code:

<h3 class="alert alert-danger" ng-show="errorsFlag.flag">{{errorMessage}}</h3>

And in my controller:

$scope.errorsFlag = { flag:false };
//some code
$scope.errorsFlag.flag = false;
$scope.errorsFlag.flag = true;
).finally(//some code);

When I get error in my function,

$scope.errorsFlag.flag = true

, and on the page element 'h3' must be visible, but when I refresh page, once it's visible, once it's not visible, what problem?
When I inspect the code I see this:

<h3 class="alert alert-danger ng-binding ng-hide" ng-show="errorsFlag.flag"></h3>

,but in console, $scope.errorsFlag.flag = true!;
In my fiddle it's work, but in my project isn't work, I understand that without all code you can't tell what kind of bug, but maybe someone was same bug and rememer how to fix it.

Thank you.

Answer Source

Remove ng-show directive and use ng-bind="errorMessage"

you don't need the errorsFlag.flag or errorsFlag object.

If you really need to display:none this h3

you can just use ng-show="errorMessage" with ng-bind="errorMessage"

   <h3 class="alert alert-danger ng-binding ng-hide" ng-show="errorMessage"  ng-bind="errorMessage"></h3>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download