CODEWITHSUNDEEP
javascriptangularjsng-show
goodCoder
goodCoder

Reputation: 43

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.

Upvotes: 2

Views: 443

Answers (3)

hasanain
hasanain

Reputation: 773

Another way of doing this is using the controller as syntax with the this keyword instead. Try this fiddle: https://jsfiddle.net/hjamal/hu4t0zL8/2/

So your code will look like this:

var app = angular.module('myApp', []);

app.controller('TestC', function TestC ($scope, $q){
    var self = this;
 	self.errFlag = {
        flag: true
    };
    
    var someFunc = function() {
      	serviceFunc().then(
            function(){
             	self.errFlag.flag = false;   
            },
            function(){
             	self.errFlag.flag = true;   
            }
        );
    };
    
    var serviceFunc = function(){
            var def = $q.defer();
        
        	def.reject("error 404");

            return def.promise;
        };    
    //someFunc();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller='TestC as tc'>demo
        <!--  ng-show="errFlag.flag"  -->
        <h3 class="alert alert-danger" ng-show="tc.errFlag.flag">
                {{tc.errFlag.flag}}
        </h3>
    </div>
</div>

Upvotes: 0

Vish
Vish

Reputation: 842

Event I too have faced this issue with ng-show. Once try updating the scope using $scope.$apply(). Or you can also use ng-if for same purpose.

Upvotes: 1

Alvaro Silvino
Alvaro Silvino

Reputation: 9753

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>

Upvotes: 0

Related Questions