Success, JavaScript and Angular Message

Question

Success, JavaScript and Angular Message

Navigation

#1 by (1 votes)

2

I'm making an application where I register for a new company, I'm a beginner in java script and I'm also using Angular in my project. What I want to do is, when the user clicks register, give a success message and then go back to home page, I tried with alert, but I do not know how to make the message appear only after the registration is successful .

This is my form:

<form role="form" name="formCadastroEmpresa" ng-submit="formCadastroEmpresa.$valid && cadastrarEmpresa()" novalidate>

I need to call the message submit="formCadastroEmpresa.$valid && cadastrarEmpresa()" is true, and before I call the cadastrarEmpresa() of the angle I need to give an alert, or something like that to warn the user that everything has happened.

An example of a form group I'm using:

<div class="form-group"  ng-class="{ 'has-error' : formCadastroEmpresa.empresaTelefone.$touched && formCadastroEmpresa.empresaTelefone.$invalid }">
   <label>Telefone</label>
   <input 
      minlength="13"
      name="empresaTelefone"
      class="form-control"
      id="telefone"
      placeholder="Telefone fixo"
      ng-model="empresa.telefone" required>
</div>
<p ng-show=" formCadastroEmpresa.$submitted && formCadastroEmpresa.empresaTelefone.$invalid" style="color:red">Um telefone para contato é necessário</p>

javascript angularjs

asked by anonymous 11.07.2016 / 19:06

1 answer

How to run the same php script via cron without overloading? How to use ScrollView + Listview

score 1 · Accepted Answer

You can use the angular-growl library that is really cool. Example:

angular.module('myApp', ['angular-growl', 'ngAnimate']);

angular.module('myApp').config(['growlProvider', function (growlProvider) {
  //Configuração do tempo que a mensagem ficará na tela
  growlProvider.globalTimeToLive(5000);
}]);

angular.module('myApp').controller("myCtrl", function($scope, growl){
 $scope.alerta = function(){
    var config = {};
    growl.success("<b>Mensagem de Sucesso</b>", config);
    growl.info("Mensagem Info", config);
    growl.warning("Mensagem Alerta", config);
    growl.error("Mensagem Erro :(", config);
 }
});

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//rawgit.com/JanStevens/angular-growl-2/master/build/angular-growl.css" />

<div ng-app="myApp" ng-controller="myCtrl">
   <div growl></div>
   <button class="btn btn-success" ng-click="alerta()">Alerta</button>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-sanitize.js" type="text/javascript"></script>
<script src="//rawgit.com/JanStevens/angular-growl-2/master/build/angular-growl.js" type="text/javascript"></script>

Do not forget to add dependencies in your project.