angular中监控模态框关闭 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/reset.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="../lib/angular-1.7.0/angular.min.js"></script>
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myCtrl">
    <!-- 按钮触发模态框 -->
    <div class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" ng-click="test()">
        开始演示模态框
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        <!--                        模态框（Modal）标题-->
                        GOTOP数据监控
                    </h4>
                </div>
                <div class="modal-body">
                    <!--                    模态框（Modal）主题内容-->
                </div>
                <div class="modal-footer">
                    <!--                    模态框（Modal）尾部      -->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<script>
    var app=angular.module('app',[]);
    app.controller('myCtrl',function($scope,$interval,$http){
        // var url_key='http://29w8827m29.wicp.vip:20381/opsYun/windows/getdiskcurrent?serverid=201';
        // function getData(url){
        //     $http({
        //         method: 'GET',
        //         url: url
        //     }).then(function successCallback(result) {
        //         var response=result.data;
        //         if(response.success){
        //             $scope.data=response.body;
        //         }
        //     }, function errorCallback(response) {
        //         // 请求失败执行代码
        //     });
        // }
        // $scope.test=function(){
        //     var timer=$interval(function(){
        //         $scope.data;
        //         getData(url_key);
        //         console.log($scope.data)
        //     },2000);
        //     $('#myModal').on('hidden.bs.modal', function () {
        //         $interval.cancel(timer);
        //     })
        // };

        // 没有后台数据的时候进行模拟
        var timer;
        $scope.test=function(){
            timer=$interval(function(){
                console.log("我成功了");
            },1000)
        };
        $('#myModal').on('hidden.bs.modal', function () {
            $interval.cancel(timer);
        })
    });
</script>
</body>
</html>

　　

posted @ 2020-08-12 17:13  sct春天  阅读(433)  评论(0)    收藏  举报