1

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)
Community
  • 1
  • 1
Christine268
  • 722
  • 2
  • 13
  • 32
  • Can you show example URL including anchor elements that produces error? Also, do you realize you are doing assignment, not comparison here `if(foundExtract = "s")`? You likely want `==` or `===` comparison here. – Mike Brant Aug 28 '15 at 20:19
  • `www.url.com/discipline.html#s` - something like that? I use the hash in the URL all the time, and even have it being used somewhere else in the code. However, without the new chunk of code posted here, #s does not break the code. – Christine268 Aug 28 '15 at 21:00

2 Answers2

0

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")
William B
  • 1,411
  • 8
  • 10
  • DOH! I usually am good about that. Fixed, but still the same problem. :/ Unfortunately setting up one of those that need to use AngularJS my worst nightmare. But, if I must, I will have to get around to it sometime. – Christine268 Aug 28 '15 at 20:59
  • It can be annoying but for all the things that you include with – William B Aug 31 '15 at 00:00
-1

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');
    });
    }
Christine268
  • 722
  • 2
  • 13
  • 32