Variable changes from function call not displaying in angular-bootstrap modal window

Question

I am trying to use angular and bootstrap to create a modal window that displays a youtube video. Following the modal example on the angular bootstrap page worked fine when I hard coded the youtube URL. However when I try to create a variable with the URL in it when the video is selected, I can't seem to keep that variable declared/changed in the instance of the modal window.

Here is a plunker demonstrating my problem in the modal example from the Angular site: http://plnkr.co/edit/n1vfSJUhcJWjNlfVrpxA?p=preview

The button that launches the modal window calls two functions when clicked: open() and my testFunction().

<button class="btn btn-default" ng-click="testFunction(); open()">Open me!</button>

This testFunction simply assigns a new value to a $scope variable:

$scope.testFunction = function(){
         $scope.testFromFunction = "Hey this is a test that was changed in that function!";
  };

How can I get <p>{{testFromFunction}}</p> in the modal window to reflect this variable assignment in the modal window? (should say "Hey this is a test that was changed in that function!", rather than "still unchanged")

The testFunction equivalent function in my actual app takes the $index and uses it to create the proper youtube URL. I need to dynamically create individual youtube links and cannot hard code them into the html/js.

Thank you very much for your time. Let me know if you need more information or if anything is unclear.

Pavel Kutakov · Accepted Answer · 2015-03-10 13:22:32Z

1

You have two scopes - one for "ModalDemoCtrl" and one for modal dialog itself. You have not defined "testFunction" in the first controller which scope is visible to your button. You also defined "TestFromFunction" as a source for modal via "resolve" parameter of modal call, but you are trying to reference the value from parent controller and not value transferred via "resolve". Here is the fixed plunker that shows your message correctly, hope it helps. http://plnkr.co/edit/F3gV7y3MYJLvzsBYZGnS?p=preview

answered Mar 10, 2015 at 13:22

Pavel Kutakov

9711 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user95227 Over a year ago

Also, would you have any guesses as to why the background doesn't get grayed out in my app? Thanks again!

Pavel Kutakov Over a year ago

What browser do you use? I've checked my plunker code with Chrome and even IE 10 and both shows graw background when opening modal.

user95227 Over a year ago

I'm actually using node-webkit to run the app as an exe but I don't know if that would cause the difference. I can double check my css to make sure something in my stylesheet isn't conflicting with bootstraps. Thanks!

Collectives™ on Stack Overflow

Variable changes from function call not displaying in angular-bootstrap modal window

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related