如何使用 Angular JS 打开引导模式？

Question

我认为我真正需要知道的是如何更改文档代码以实现我自己的模态。它不会让我简单地添加一个

$scope.myTitle = "Title Here";

然后放到HTML里面，需要经过modalInstance的东西吗？

---

我现在意识到有一种使用 Angular JS 打开 Bootstrap 模式的特定方法，而不是我尝试使用 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？我没有在文档的 Plunker 中看到此文件。我错过了什么？

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

我在这篇文章中看到Invoking modal window in AngularJS Bootstrap UI using JavaScript

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

---

所以我之前使用 Angular 填充 Bootstrap 模态，没有任何问题。但我认为我这次的具体情况可能会造成问题？

当我在 URL 之后加载带有 #s 的页面时，模态确实会出现，但 Angular 没有填充，因为它显示了插值。另外，我收到此错误：

错误：p 未定义

接着是对 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：无法读取未定义的属性“childNodes”

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)

---

Answer 1

如果将相关代码放入plunkr，调试这个问题会更有效。

这可能不会抛出您看到的错误，而是您的条件：

if(foundExtract = "s")

可能应该使用比较运算符而不是赋值运算符：

if(foundExtract === "s")

Answer 2

回到我最初是如何尝试实现这一点的，当我得到错误时：p 未定义（仍然不知道为什么 p）.. 我终于让它工作了。

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

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


   urlExtract = location.hash;
   foundExtract = urlExtract.split("#")[1];

   if(foundExtract == "s"){

    $(document).ready(function(){
        $('#waiverModal').modal('show');
    });
    }