Show and Hide Alert Using AngularUI Directives for Bootstrap

angularjs angularjs-directive angularjs-scope angular-ui angular-ui-bootstrap

12,461

Instead of using the collapse class, use Angular UI's collapse directive.

It takes an expression, that when true will collapse the element it is applied to:

<div collapse="isCollapsed" class="alert"<\div>

Then in your controller you can set isCollapsed to true/false as needed.

Or an even simpler approach is to usr ng-show or ng-hide on the alert. The difference is you'll have to supply your own css animation.

12,461

Author by

Adwin

Updated on June 27, 2022

Comments

Adwin almost 2 years

Am a newbie in the field of web design. I came across bootstrap and later angularjs. I find them quite impressive. I noticed that bootstrap comes with its own jquery libraries and angularjs uses its own jquery library. In order to avoid conflicts I opted to use angular-ui directives for bootstrap: [http://angular-ui.github.io/bootstrap/][1]

I have a basic form page and would like to display an alert when the sign in button is clicked. This is the html:

<!DOCTYPE html>
<html lang = "en" ng-app="ntula">
<head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

     <title>NTULA</title>
</head>
<body ng-controller="loginCtrl">
<div id="page">
    <header class="container">
        <div id="menu" class="navbar navbar-default navbar-fixed-top">
            <div>
                <h1>NTULA</h1>
            </div>
        </div>
    </header>

    <section id="body" class="container">

        <form class="form-box">
            <h1 id="head">Enter Details</h1>
            <div id="jina">
                <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            </div>
            <div id="pass">
                <input type="password" class="form-control" placeholder="Password" required="">
            </div>
                <button class="btn btn-lg btn-primary pull-right" ng-click="display()">Sign in</button>
        </form>    
    </section>

<div class="row">
    <div class="col-md-3 show-grid">
        <div class="alert collapse" id="alat" ng-class="{'alert-danger': true, 'alert-dismissable': closeable}">
            <a href="#" class="close" ng-click="closeIt()">&times;</a>
            <p>Am appearing</p>
        </div>
    </div>              
</div>



<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-0.11.0.min.js">
<script type="text/javascript" src="js/site.js"></script>
<script type="text/javascript" src="js/controllers/loginctrl.js"></script>
</body>
</html>

The alert is hidden at the start because I used the

class="alert collapse"

This is the javascript code for the controller:

var ting = angular.module("ntula",[]);

ting.controller("loginCtrl", function loginCtrl($scope){

    /*scope.alerts = [];

    $scope.closeAlert = function(index) {
            $scope.alerts.splice(index, 1);
    };*/

var it=$("#alat");
    $scope.display = function(){
        it.show();
    };

    scope.closeIt=function(){
        alat.hide();
    }
});

My javascript appears to be all mixed and I don't know how to get it fixed. I would like to use the angularui directives but the code they have provided does not provide the functionality I need.

Using their libraries I would like to:

Show the alert when I click the button. (it is hidden at the start). Hide the alert when I click on the small 'x' it contains.

I would like to hide and show the alert when needed and not hide and close the alert.

If this was using the usual Bootstrap jquery library it would be something like this:

var wims=$("#alat");
    wims.show();

    wims.on("close.bs.alert", function(){
        wims.hide();
        return false;
    });

Does anyone have experience with the angularui directives for bootstrap library and know how to show an alert which is hidden when one clicks on a button? As, well as to hide an alert when a button is clicked? Thanks...