Question

我是棱角分明的新人。我已经创建了一个带有bootstrap模式的自定义指令（templateUrl：modal-directive.html）。当我在索引页面中使用该指令时，模态不会弹出。但是，当我只运行modal-directive.html时，模式会弹出。

我做错了什么？

angular.module('mainApp', [])
     .directive('modal-directive', function () {

    return {
        templateUrl: "modal-directive.html",
        restrict: 'EA'
    }
})

的index.html

    <html ng-app="mainApp">
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="script/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        Hello from Index
        <div>
            <modal-directive></modal-directive>
        </div>
    </body>
    </html>

模态-directive.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="script/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <p>Hello from modal directive</p>
    <form>
        <button type="button" style="position:page" class="btn btn-primary" data-toggle="modal" data-target="#employeeSearchModal">
            View Employee
        </button>
    </form>

    <div id="employeeSearchModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><b>Search Employee</b></h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <input type="text" id="searchEmp" ng-model="searchEmpno" placeholder="Enter Employee id" class="form-control" />
                            <button data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#employeeDetailsModal" ng-click="doSearch()">Search</button>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
    </body>
</html>

无法将自定义指令与模态一起使用

0 个答案: