CODEWITHSUNDEEP
angularjs
Daniel Chan
Daniel Chan

Reputation: 316

How to bind an alert message with the controller?

Hi guys I've been experimenting with a simple commenting app with AngularJS and I'm stuck on how to get an alert message popup in the view if a user inputs an empty string into an input field.

The HTML view and ng-show logic as below:

<div ng-show="alert===true" class="alert alert-warning alert-dismissible inner" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;
  </span><span class="sr-only">Close</span></button>
  <strong>Warning!</strong> You did not submit a comment.
</div>

The controller view and $scope logic as below: 

// pushes data back to Firebase Array
$scope.addComment = function(){

  if ($scope.newComment.text === ''){
    $scope.alert = true;         
  }
  else {
    $scope.alert = false;        
  }

  $scope.comments.$add($scope.newComment);           
  $scope.newComment = {text: '', date: ''}; 
};

The problem is that although I can bind the alert message logic to the HTML view, the alert message only shows up once and cannot be re-used again if the user types in an empty string again.

Should I use a while loop or something for this? Any help would be much appreciated!

EDIT:

Thanks to meriadec's feedback, I have made a fix using a more simple codebase, as follows.

The HTML view and ng-show logic as below:

<div ng-show="alert===true" class="alert alert-warning inner" role="alert">
    <button type="button" class="btn" ng-click="alert=false"><span aria-hidden="true">&times;
    </span><span class="sr-only">Close</span></button>
    <strong>Warning!</strong> You did not submit a comment.
</div>

The controller view and $scope logic as below: 

// pushes data back to Firebase Array
$scope.addComment = function(){

  if ($scope.newComment.text === ''){
    return $scope.alert = true; 
    };   

  $scope.comments.$add($scope.newComment);           
  $scope.newComment = {text: '', date: ''}; 
};

Upvotes: 0

Views: 11251

Answers (1)

meriadec
meriadec

Reputation: 2983

You can re-set your alert property to false when clicking the close button. BUT, as you got an ngShow directive, your alert is in a child scope so you need to use an object for having a correct data binding between scopes. More info here.

See this :

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

angular.module('demo')
  .controller('DemoCtrl', function ($scope) {
  
    $scope.ui = { alert: false };
  
    $scope.addComment = function () {
      if (!$scope.myComment) {
        $scope.ui.alert = true;
      } else {
        alert('well !');
      }
    }
  
  });
.alert {
  position: absolute;
  top: 15px;
  left: 20%;
  right: 20%;
  width: 300px;
  background: white;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoCtrl">
  
  <div class="alert" ng-show="ui.alert">
    <button ng-click="ui.alert = false">close</button>
    You did not enter any comment
  </div>
  
  <form ng-submit="addComment()">
    <input type="text" ng-model="myComment">
    <input type="submit">
  </form>
  
</div>

Upvotes: 1

Related Questions