在 Bootstrap 和 Angular 中创建模式

Question

我正在使用 bootstrap 和 angular 开发一个网络应用程序。我有一个按钮，我想显示一个模式，其中包含来自另一个 html 页面（employee.function.add.html）的数据。所有文件都在根员工文件夹下

这是employee.function.add.html中的模态内容

    <div class="modal fade" id="addModal" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">X</button>
                  <h1>Lab 6</h1>
                </div>
                <div class="modal-body">
                  <div class="panel panel-default">
                    <div class="panel-heading text-center">
                      Employee Information
                    </div>
                    <div class="panel-body">
                      <div class="row">
                        <div class="text-right col-xs-2">Title:</div>
                        <div class="text-left col-xs-3" id="title"></div>
                        <div class="text-right col-xs-2">First:</div>
                        <div class="text-left col-xs-3" id="firstname"></div>
                      </div>
                      <div class="row">
                        <div class="text-right col-xs-2">Phone#</div>
                        <div class="text-left col-xs-3" id="phone"></div>
                        <div class="text-right col-xs-2">Email</div>
                        <div class="text-left col-xs-3" id="email"></div>
                      </div>
                      <div class="row">
                        <div class="text-right col-xs-2">Dept:</div>
                        <div class="text-left col-xs-3" id="departmentname"></div>
                        <div class="text-left col-xs-2">Surname:</div>
                        <div class="text-left col-xs-4">
                          <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <div class="panel-footer">
                      <input type="button" value="Find Employee" id="empbutton" />
                      <div class="col-xs-10" id="lblstatus"></div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>

按钮在employee.function.html中创建

<div class="animated fadeIn">
  <div class="row">
    <!--<div class="col-md-6">-->
    <div class="col-md-12">
      <div class="card">
        <div>
            <div class="panel panel-default">
              <div class="panel-heading" style="background-color:#e0e9f5">
                <h2 class="panel-title">Employee Functions</h2>
              </div> 
              <br />
                <div class="col-sm-12">
                <div align="right" style="padding-bottom:10px">
                    <!--<button type="button" class="btn btn-info btn-default btn-lg" href="employee.function.add.html" data-toggle="modal" data-target="#addModal">Add Function</button>-->
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
                </div>              
                </div>      
              <div class="panel-body">
                <jqxGrid 
                  [width]="'100%'" [theme]='"energyblue"' [source]='functionAdapter' [pageable]='true' [height]='500' [altrows]='true'
                  [editable]='true' [columns]='columns'>
               </jqxGrid>
              </div>

            </div>         
        </div>  
      </div>

    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
</div>

我在控制台中不断收到此错误。

Uncaught Error: Bootstrap's Javascript requires Jquery

在 index.html 文件中，我已经声明了引导程序所需的所有样式和链接。

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我怎样才能让模式工作？ 并希望澄清一些事情。我正在为项目使用引导程序和角度。在员工文件夹和其他文件夹中是 html 文件和 ts 文件。我是否收到此错误是因为我应该使用 Angular 编写模态？而不是引导程序？我以为我会使用引导程序制作模态，但出现了该错误。一些澄清会有所帮助。谢谢你的帮助。

Answer 1

好像您忘记将 jQuery 添加到您的项目中。 Bootstrap 需要 jQuery 才能工作。在包含 bootstrap.min.js 之前将此行添加到您的代码中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

希望对您有所帮助！ :)

Answer 2

Bootstrap 需要 Jquery 才能使其小部件工作。如果你想要 angular 版本，我会在这里查看 angular ui bootstrap：Angular UI Bootstrap