如何用Angular JS打开一个Bootstrap模态

How to open a Bootstrap modal with Angular JS?

本文关键字：一个 Bootstrap 模态 Angular 何用 JS      更新时间：2023-09-26

我认为我真正需要知道的是如何更改文档代码，这将允许我实现自己的模态。它不允许我简单地添加

$scope.myTitle = "Title Here";

然后把它放在HTML中，它需要通过modalInstance的东西?

我现在意识到，有一个特定的方式来打开一个Bootstrap模式使用Angular JS，而不是我一直试图使用JQuery，但我不知道如何实现这到我的代码?

我试过了

$scope.modalTitle = modalInfoTitle;
$scope.modalLinks = modalInfoLinks;
$scope.open = function (size) {
    var modalInstance = $modal.open({
      size: size,
    });
    urlExtract = location.hash
    foundExtract = urlExtract.split("#")[1];
        if(foundExtract == "s"){
            $scope.open('lg')
        }
}

我得到一个粗体线，出现在网页的顶部，如果一个模态试图打开。可能是因为它不知道该打开什么。我从https://angular-ui.github.io/bootstrap/得到这个代码，我不能完全理解是什么打开模态，就像它指向那个特定的模态。我试着添加

templateUrl:"myModalContent.html",

并将模态HTML包装在所示的脚本标签中，但这没有做任何事情。是否需要一个mymodalcontent。html?我没有看到这个文件存在于普伦克的文件。我错过了什么?

下面是我尝试的旧方法。但它包含了这些新更改之前我的代码的基础。

我在这篇文章中读到使用JavaScript在AngularJS Bootstrap UI中调用模态窗口

关于一些需要添加的CSS，我也尝试过添加，但没有改变。

所以我以前用Angular填充过Bootstrap模态，没有任何问题。但我想这次我的特殊情况可能会造成问题?

当我在URL后加载#s页面时，模态确实出现了，但Angular没有填充，因为它显示了插值。另外，我得到这个错误:

错误:p is undefined

后面是对angular.min.js的CDN引用。我甚至不知道p是从哪里来的

下面是导致这个的代码:

if(typeof modalInfoTitle !== 'undefined'){
    $scope.modalTitle = modalInfoTitle;
    $scope.modalLinks = modalInfoLinks;
    urlExtract = location.hash
    foundExtract = urlExtract.split("#")[1];
    if(foundExtract == "s"){
        $('#waiverModal').modal('show');
    }
}

modalInfoTitle和modalInfoLinks位于一个单独的JS文件，严格是JS。这个文件为我的角提供了一堆其他变量，所以我知道这不是问题。另外，我可以在任何地方alert($scope.modalTitle);，它提醒正确的文本。

在其他JS文件:

var modalInfoTitle = "Modal Title";
var modalInfoLinks = [
 [
  {title:"Name1",link:"file1.pdf"},
  {title:"Name3",link:"file3.pdf"},
 ],[
  {title:"Name2",link:"file2.pdf"},
  {title:"Name4",link:"file4.pdf"},
 ]];

模态本身在HTML文件中:

<div class="modal fade buildingsModal" id="waiverModal" role="dialog">
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">{{modalTitle}}</h4>
   </div>
   <div class="modal-body">
    <table id="tableInModal">
    <tr ng-repeat="row in modalLinks">
     <td ng-repeat="z in row"><a href="{{z.link}}">{{z.title}}</a></td>
    </tr></table>
   </div>
   <div class="modal-footer clear">
  </div>
 </div>
</div>
</div>

这里有些不同。前面显示的错误是我使用Firefox时出现的错误。然而，这是我在Chrome上得到的错误:

TypeError: Cannot read property 'childNodes' of undefined

at g (angular.min.js:47)
at g (angular.min.js:47)
at g (angular.min.js:47)
at g (angular.min.js:47)
at g (angular.min.js:47)
at g (angular.min.js:47)
at J (angular.min.js:54)
at g (angular.min.js:47)
at g (angular.min.js:47)
at g (angular.min.js:47)

如果您将相关代码放入plunkr中，则调试此问题将更加有效。

这可能不会抛出您所看到的错误，但是您的条件:

if(foundExtract = "s")

应该使用比较操作符而不是赋值操作符:

if(foundExtract === "s")

回到我最初试图实现这一点，当我得到错误:p是未定义的(仍然不知道为什么p)。我终于把它弄好了。

尽管angular代码所在的angular模块本身是在一个ready函数中，但我所需要做的就是将模态打开代码包装在ready函数中，它就可以工作了....

    $scope.modalTitle = modalInfoTitle;
    $scope.modalLinks = modalInfoLinks;

   urlExtract = location.hash;
   foundExtract = urlExtract.split("#")[1];
   if(foundExtract == "s"){
    $(document).ready(function(){
        $('#waiverModal').modal('show');
    });
    }
相关文章：