模态框的控制器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../lib/angular-1.7.0/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myCtrl">
    <button class="btn-primary btn" data-toggle="modal" data-target="#myModal" ng-click="test1()">按钮</button>
</div>
<!-- 模态框（Modal） -->
<div ng-controller="modalController" 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）标题</h4>
            </div>
            <div class="modal-body">
                <buttton ng-click="test()" class="btn btn-primary">按钮</buttton>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    var app = angular.module('app', []);
    app.value('data',{
        hostId:0
    });
    app.controller('myCtrl', function ($scope,data) {
        $scope.data=data;
        $scope.data.hostId=8;
    });
    app.controller('modalController', function ($scope,data) {
        $scope.data=data;
        $scope.test = function () {
            console.log($scope.data.hostId);
        }
    });
</script>
</body>
</html>

　　

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