Question

是网页设计领域的新手。我遇到了bootstrap和后来的angularjs。我发现它们令人印象深刻。我注意到bootstrap带有自己的jquery库，angularjs使用自己的jquery库。为了避免冲突，我选择使用angular-ui指令进行引导： [http://angular-ui.github.io/bootstrap/][1]

我有一个基本的表单页面，并希望在单击登录按钮时显示警告。这是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>

警报在开始时隐藏，因为我使用了

class="alert collapse"

这是控制器的javascript代码：

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();
    }
});

我的javascript似乎全是混合的，我不知道如何修复它。我想使用angularui指令，但他们提供的代码不提供我需要的功能。

使用他们的库我想：

单击按钮时显示提醒。（它在开始时隐藏）。当我点击它包含的小'x'时隐藏警报。

我想在需要时隐藏并显示警报，而不是隐藏和关闭警报。

如果这是使用通常的Bootstrap jquery库，它将是这样的：

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

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

有没有人有使用bootstrap库的angularui指令的经验，并且知道如何在单击按钮时显示隐藏的警报？为什么在单击按钮时隐藏警报？感谢...

Answer 1

使用Angular UI的collapse指令，而不是使用折叠类。

它需要一个表达式，当为true时会折叠它应用于的元素：

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

然后在您的控制器中，您可以根据需要将isCollapsed设置为true / false。

或者更简单的方法是在警报上使用显示或ng-hide。不同之处在于您必须提供自己的CSS动画。

使用AngularUI指令为Bootstrap显示和隐藏警报

1 个答案: