ng-click doesn't work inside script

Question

I am using the angular-bootstrap in AngularJS, because I want to use dialogs. In my HTML I have the following code:

<script type="text/ng-template" id="create.html">
<div class="modal-header">
    <h3 class="modal-title">Welcome!</h3>
</div>
<div class="modal-body">
  <p>Hi</p>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
</div>

The modal dialog shows up, but nothing happen when I click on the "OK" button. There is also no error in the console. When I create a button and place it outside the script, then it works. But I need to use the button in the modal dialog.

I have created a factory for the modal dialog, because I want to use it in my controller. Here the function what works fine:

$scope.createGame = function(data){
   // Open the modal dialog
   ModalFactory.open(); 
}

Now the modal dialog shows up and the button "OK" appears. When I click on "OK" nothing happen. This is the function I have created for the "OK" button.

$scope.ok = function(data){
    // Close the modal dialog
    alert("Test");
}

But the triggering of ng-click in that script what you see above doesn't work...

Is your $scope.ok definition located in modal's controller? — user3707125
– user3707125, Commented May 30, 2015 at 14:36
I have located $scope in the controller, there I am using the $scope ofcourse. But I didn't use it in the ModalController, because it's a factory. — Jamie
– Jamie, Commented May 30, 2015 at 14:40
By default BootstrapUI modals have isolated scope created from $rootScope and no controller attached. You need to either provide your scope over there, or create a controller for the modal dialog itself. Take a look at their example: github.com/angular-ui/bootstrap/blob/master/src/modal/docs/… — user3707125
– user3707125, Commented May 30, 2015 at 14:45
Thanks, but I need to call the open function in that controller from another controller. I don't know how to do that... — Jamie
– Jamie, Commented May 30, 2015 at 14:47
This is what you mean, but how do I call the function in a controller from another controller? See: plnkr.co/edit/QnEEwgV2rra9lXR59xwS — Jamie
– Jamie, Commented May 30, 2015 at 15:00

Sajeetharan · Accepted Answer · 2015-05-30 14:17:47Z

2

Your function requires a parameter "data" but you are not passing it.

 <button class="btn btn-primary" ng-click="ok()">OK</button>

Either Change your function signature like this,

$scope.ok = function(){
    // Close the modal dialog
    alert("Test");
}

Or Pass the data.

It's always use a different function name rather than just "ok"

answered May 30, 2015 at 14:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

Jamie Over a year ago

Thank you, but that doesn't solve the problem. The ng-click inside that script is the problem. But I don't know how to fix that.. Because when I create a button outside the script with the same function, it works.

Sajeetharan Over a year ago

where have you defined the controller? if you can create a plunker it will be more helpful

Jamie Over a year ago

In the app.js, but here you have an overview: plnkr.co/edit/TYFyCwMK1hUUQgwjs6sa

Collectives™ on Stack Overflow

ng-click doesn't work inside script

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