javascript - 如何使用 Angular JS 打开 Bootstrap 模式？

Question

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

$scope.myTitle = "此处标题";

然后放在HTML中，需要经过modalInstance的东西吗？

<小时/>

我现在意识到有一种特定的方法可以使用 Angular JS 打开 Bootstrap 模式，而不是我一直尝试使用 JQuery 来打开 Bootstrap 模式，但我不知道如何在我的代码中实现它？

我已经尝试过

$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 不会填充，因为它显示了插值。此外，我收到此错误:

Error: 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。这个文件还为我的 Angular 提供了一堆其他变量，所以我知道这不是问题。另外，我可以在任何地方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)

<小时/>

Answer 1

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

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

if(foundExtract = "s")

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

if(foundExtract === "s")