goodCoder goodCoder - 13 days ago 6
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
SomeFunction.getSomething()
.then(
//success
function(result){
$scope.errorsFlag.flag = false;
},
//fail
function(error){
$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.


https://jsfiddle.net/gc3equ1f/1/


Thank you.

Answer

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>
Comments