Angularjs 使用用于引导的AngularUI指令显示和隐藏警报_Angularjs_Angularjs Directive_Angularjs Scope_Angular Ui_Angular Ui Bootstrap

Angularjs 使用用于引导的AngularUI指令显示和隐藏警报

angularjs

Angularjs 使用用于引导的AngularUI指令显示和隐藏警报,angularjs,angularjs-directive,angularjs-scope,angular-ui,angular-ui-bootstrap,Angularjs,Angularjs Directive,Angularjs Scope,Angular Ui,Angular Ui Bootstrap,我是网页设计领域的新手。我遇到了bootstrap和后来的angularjs。我觉得他们给人留下了深刻的印象。我注意到bootstrap自带了自己的jquery库，angularjs使用自己的jquery库。为了避免冲突，我选择对引导使用angular ui指令： [ 我有一个基本表单页面，希望在单击“登录”按钮时显示警报。这是html： <!DOCTYPE html> <html lang = "en" ng-app="ntula"> <head>

我是网页设计领域的新手。我遇到了bootstrap和后来的angularjs。我觉得他们给人留下了深刻的印象。我注意到bootstrap自带了自己的jquery库，angularjs使用自己的jquery库。为了避免冲突，我选择对引导使用angular ui指令： [

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

这是控制器的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”时隐藏警报

我希望在需要时隐藏和显示警报，而不是隐藏和关闭警报

如果这是使用通常的引导jquery库，则会是这样：

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

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

是否有人有过引导库angularui指令的经验，并且知道如何在单击按钮时显示隐藏的警报？以及如何在单击按钮时隐藏警报？

谢谢…

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

它采用一个表达式，当为true时，该表达式将折叠应用于的元素：

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

Hi Sunil，感谢您的反馈。我对html文件做了此修改：对javascript文件做了此修改：$scope.denab=function（）{$scope.isCollapsed=true；}；$scope.enab=function（）{$scope.isCollapsed=false；}；但什么都没有发生。当页面第一次加载时，它甚至不隐藏。我做错了什么？你的应用程序中是否包含Angular UI引导的折叠指令？此外，要在应用程序加载时隐藏，你应该在控制器中设置$scope.isCollapsed=true。我已将该指令添加到我的app by:var ting=angular.module（“ntula”，[“ui.bootstrap”]）；我的关闭按钮出现错误，所以我将其设置为：感谢您帮助一位新手。。。
<div collapse="isCollapsed" class="alert"<\div>