Question

我正在使用bootstrap和angular在web应用程序上工作。我有一个按钮，我想用另一个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 here

中创建

<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文件中，我已经为bootstrap声明了所有需要的样式和链接。

  <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>

如何让模态工作？并希望澄清一些事情。我正在为项目使用bootstrap和angular。在employee文件夹中，其他文件夹是html文件和ts文件。我收到此错误是因为我应该使用angular来编写模态吗？而不是引导？我假设我会使用bootstrap制作模态，但会出现该错误。一些澄清会有所帮助。谢谢你的帮助。

Answer 1

好像你忘了将jQuery添加到你的项目中。 Bootstrap需要jQuery才能工作。在包含bootstrap.min.js

之前，将此行添加到您的代码中

<ChildComponent>

我希望有所帮助！：）

Answer 2

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

在Bootstrap和Angular中创建一个模态

2 个答案: