angular ng-show does show content even set to true

Question

I am experiencing trouble with ng-show. To specify my problem; I have a system where I want to create a user. When you do this, I want the system to generate a box with a return message - specific for .success and .error. I have created to boxes for both cases, however none of these show up when they're supposed to be set to true.

Here is my code.

Html.

<div ng-controller="SignupController as ctrl" >
                    <div class="alert alert-success" ng-show="ctrl.booleanSuccess"> 
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <div>{{ctrl.feedbackSuccessMessage}}</div>
                    </div>
                    <div class="alert alert-warning" ng-show="ctrl.feedbackErrorMessage">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <div>{{ctrl.feedbackErrorMessage}}</div>
                    </div>
                </div>

Javascript.

angular.module('myApp.signup', [])


    .controller('SignupController', ["$http", function ($http) {


            var self = this;
    self.booleanSuccess = false;
            self.feedbackSuccessMessage = null;
            self.feedbackErrorMessage = null;

            //Dette sker, når signup-knappen klikkes (ng-click)
            self.signupButton = function () {
                var username = self.username;
                var password = self.password;

                $http.post('http://localhost:8080/MomondoProjectServer/api/flightinfo/createUser/' + username + '/' + password)
                        .success(function (response, status, headers, config) {
                            self.username = "";
                            self.password = "";
                            console.log(response);
                            self.booleanSuccess = true;
                            self.feedbackSuccessMessage = response.info + response.username;
                        }).error(function (response, status, headers, config) {
                            self.feedbackErrorMessage = "Failed to create user: '" + self.username + "'. Please try again.";
                            console.log(self.feedbackErrorMessage);
                });
            };

        }]);

Answer 1

You should store the data inside $scope variable rather than this instance. Following code will work.

Script

angular.module('myApp.signup', [])
    .controller('SignupController', ["$scope", "$http",
        function ($scope, $http) {
            $scope.booleanSuccess = false;
            $scope.feedbackSuccessMessage = null;
            $scope.feedbackErrorMessage = null;
            //Dette sker, når signup-knappen klikkes (ng-click)
            $scope.signupButton = function () {
                var username = $scope.username;
                var password = $scope.password;
                $http.post('http://localhost:8080/MomondoProjectServer/api/flightinfo/createUser/' + username + '/' + password)
                    .success(function (response, status, headers, config) {
                        $scope.username = "";
                        $scope.password = "";
                        console.log(response);
                        $scope.booleanSuccess = true;
                        $scope.feedbackSuccessMessage = response.info + response.username;
                    }).error(function (response, status, headers, config) {
                        $scope.feedbackErrorMessage = "Failed to create user: '" + $scope.username + "'. Please try again.";
                        console.log($scope.feedbackErrorMessage);
                    });
            };
        }
    ]);

HTML

<div ng-controller="SignupController as ctrl" >
        <div class="alert alert-success" ng-show="booleanSuccess"> 
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <div>{{feedbackSuccessMessage}}</div>
        </div>
        <div class="alert alert-warning" ng-show="feedbackErrorMessage">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <div>{{feedbackErrorMessage}}</div>
        </div>
</div>

Answer 2

See this plunker, I've modified your code to use a directive instead of controllerAs, because it's better :)
I've also mocked a backend-call by resolving a promise after 1.5 seconds.

Could it be that you simply forgot to add the form to the scope (not $scope) of the controller? Because that was the only thing I had to do to make it work.

'use strict';

(function(angular) {

  angular.module('myApp', []);

  angular.module('myApp')
    .controller('SignupController', ['$q', '$timeout', function($q, $timeout) {
      var mv = this;

      mv.booleanSuccess = false;
      mv.feedbackSuccessMessage = null;
      mv.booleanError = false;
      mv.feedbackErrorMessage = null;
      mv.username = '';
      mv.password = '';

      mv.signUpHandler = function() {
        return $q(function(resolve, reject) {
          if(mv.username === '' || mv.password === '') {
            mv.booleanError = true;
            mv.feedbackErrorMessage = 'password and username are required';
            mv.booleanSuccess = false;
            mv.feedbackSuccessMessage = null;

            reject(mv.feedbackErrorMessage);
          } else {
            mv.booleanError = false;
            mv.feedbackErrorMessage = null;

            $timeout(function() {
              mv.booleanSuccess = true;
              mv.feedbackSuccessMessage = 'You are now logged in!';

              resolve(mv.feedbackSuccessMessage);
            }, 1500);  
          }
        });
      };
    }]);
  angular.module('myApp')
    .directive('signup', [function() {
      return {
        restrict: 'E',
        controller: 'SignupController',
        controllerAs: 'signupCtrl',
        templateUrl: './signup.template.html'
      };
    }]);

})(window.angular);

Answer 3

There might be 2 things that you want:

1) 2 way binding - so that to show the alert messages whenever 'booleanSuccess' or 'feedbackErrorMessage' changes.

2) Bind the variable only once, so that when you receive any value in 'booleanSuccess' or 'feedbackErrorMessage' variable, you show it and that alert message remains on the page forever unless you do any DOM manipulation.

If you want the first thing then see the answer given by @VVK. Reason - only variables with '$scope' gets the two way binding capability. See - https://docs.angularjs.org/guide/scope. And do not confuse $scope with general meaning of scope (in javascript or angularJS). $scope is a service and needs to be injected inside controller.

If you want 2nd thing, then there are 2 approaches(could be more):

i) again register your variables with $scope but write your HTML like this:

              <div class="alert alert-success" ng-show="ctrl.booleanSuccess"> 
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <div>{{::feedbackSuccessMessage}}</div>
                </div>
                <div class="alert alert-warning" ng-show="ctrl.feedbackErrorMessage">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <div>{{::feedbackErrorMessage}}</div>
                </div>

ii) Make sure that your HTML partial gets into DOM after your server call/s is/are complete. As you have mentioned using ngRoute, so the easiest way to do this - when your declare your routeprovider to show this partial on a specific location, then alongwith properties like template, controller, etc., write another property 'resolve'. Please go through - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider. Make a new property of type function for the resolve object. You can use $q to make a deferred promise, return this promise from the resolve's function, and resolve this promise when server's data is received. Then send this server data as an arguement into deferred.resolve() method.

Ex.-

$routeProvider.when(someurl,{
   templateUrl : your partial's url,
   controller : SignupController,
   resolve : {
     mydata : function($q){
       var deferred = $q.defer();
            $http.post('http://localhost:8080/MomondoProjectServer/api/flightinfo/createUser/' + username + '/' + password)
                    .success(function (response, status, headers, config) {
                        angular.extend(resolve,{successData:true})
                        deferred.resolve(response); //important
                    }).error(function (response, status, headers, config) {
                        angular.extend(resolve,{successData:false})
                        deferred.resolve(response); // important
            });
     }
   }
});

now inject resolve's 'mydata' into your controller. Check in controller if it's successData is true or false and accordingly set your variables - booleanSuccess or feedbackErrorMessage.

The main point here is that your HTML partial will loaded be into DOM only after your promise inside 'resolve' gets resolved.

The ii) approach can be done by many other ways like using ng-if or ng-switch or ng-include, but resolve property is my favorite.

Also, I would suggest to simply register your variables with $scope and have fun with 2 way binding.

Caution - Don't think that controller's variables (or 'this' properties) contain references in HTML, they don't. Only way of 2 way binding in AngularJS in with $scope.

Hope this helps, actually didn't want to give this long answer.

Answer 4

There is most likely a problem with your data source. The following works:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp">
    <h2>Something</h2>
    <div ng-controller="SignupController as ctrl">
        <div class="alert alert-success" ng-show="ctrl.booleanSuccess">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <div>{{ctrl.feedbackSuccessMessage}}</div>
        </div>
        <div class="alert alert-warning" ng-show="ctrl.feedbackErrorMessage">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <div>{{ctrl.feedbackErrorMessage}}</div>
        </div>
        <button ng-click="ctrl.signupButton()">Sign up</button>
    </div>
</div>
<script>
    angular.module('myApp', [])
      .controller('SignupController', ["$q", function ($q) {
          var self = this;
          self.booleanSuccess = false;
          self.feedbackSuccessMessage = 'Blah blah';
          self.feedbackErrorMessage = null;

          //Dette sker, når signup-knappen klikkes (ng-click)
          self.signupButton = function () {
              var username = self.username;
              var password = self.password;

              $q.when({
                  info: 'Logged in',
                  username: 'User'
              })
                .then(function (response) {
                    self.username = "";
                    self.password = "";
                    console.log(response);
                    self.booleanSuccess = true;
                    self.feedbackSuccessMessage = response.info + response.username;
                });
          };

      }]);
</script>