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

Question

I think what I really need to know is how to make changes to the documentation code that will allow me to implement my own modal. It won't let me simply add a

$scope.myTitle = "Title Here";

And then place it in the HTML, it needs to go through the modalInstance stuff?

---

I realize now that there is a specific way to open a Bootstrap modal using Angular JS, instead of how I been trying to do it using JQuery, but I cannot figure out how to implement this into my code?

I have tried

$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')
        }
}

I get a bold line that appears at the top of the web page, as if a modal is trying to open. Probably because it doesn't know what to open. I am getting this code from https://angular-ui.github.io/bootstrap/ and I can't quite understand what opens the modal, like where it points to that specific modal. I tried adding in the

templateUrl: 'myModalContent.html',

and wrapping the modal html in the script tags shown, but that doesn't do anything. Does there need to be a myModalContent.html? I don't see this file existing in the Plunker for the documentation. What am I missing?

Below is the old way I was attempting this. But it contains the base of my code before these new changes.

I read in this post Invoking modal window in AngularJS Bootstrap UI using JavaScript

about some CSS that needs to be added, which I've tried adding as well with no change.

---

So I've used Angular to fill a Bootstrap modal before with no problems. But I think my specific situation this time around may be causing problems?

When I load the page with #s after URL, the modal does appear, but the Angular doesn't fill in as it shows the interpolates. In addition, I am getting this error:

Error: p is undefined

Followed by the usual blob of CDN references to angular.min.js. I don't even know where p is coming from.

Here is the code causing this:

if(typeof modalInfoTitle !== 'undefined'){
    $scope.modalTitle = modalInfoTitle;
    $scope.modalLinks = modalInfoLinks;

    urlExtract = location.hash
    foundExtract = urlExtract.split("#")[1];
    if(foundExtract == "s"){
        $('#waiverModal').modal('show');
    }
}

modalInfoTitle and modalInfoLinks are located in a separate JS file that is strictly JS. This file feeds my angular a bunch of other variables as well so I know that is not the problem. Plus I can alert($scope.modalTitle); anywhere and it alerts the correct text.

In other JS file:

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"},
 ]];

The modal itself in the HTML file:

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

---

So here is something different. The error I showed earlier is the error I get using Firefox. However, here is the error I get with 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

It will be much more effective to debug this issue if you put the related code into a plunkr.

This probably would not throw the error you are seeing, but your conditional:

if(foundExtract = "s")

Should probably be using a comparison operator instead of an assignment operator:

if(foundExtract === "s")

Answer 2

Going back to how i was ORIGINALLY trying to accomplish this, when I was getting the Error: p is undefined (still don't know why p).. I FINALLY GOT THIS TO WORK.

Despite the angular module that the angular code is in is in a ready function itself..all I needed to do was wrap the modal open code in a ready function and it works....

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


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

   if(foundExtract == "s"){

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