Calling a function onclick in AngularJs

Question

My code has following structure:

1. main.html - loads all modules - declares ng-app and main controller - contains div tag-load-div
2. file1.html ... (all other html files) - contain only <div> / child tags and are loaded into a load-div which is in main.html on events such as click

now in one such file say file3.html, I have a checkbox. onclick of that checkbox I want to open a modal window - a form that will be submitted. Now here is my code

file3.html

    <div>
        <input type="checkbox" name="your-group" value="unit-in-group" onclick="toggleModal();"/>Unit-in-group
        <modal title="some title" visible="showModal">
            <form role="form">
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" />
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" />
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </modal>
    </div>

now I have written follwing code in the main main controller declared in main.hml

$scope.showModal = false;
  $scope.toggleModal = function(){
    $scope.showModal = !$scope.showModal;
 };

The expected behaviour is when my file3 is loaded I will see a check box on the screen and as I click it, it will open a modal window but instead I see modal form fields on the same page where I see checkbox. and when I click it I get angular exception that showModal is not defined.

Where am I going wrong?

Answer 1

Just need to use Angular syntax: ng-click for the click and ng-show for the visibility.

 <input type="checkbox" name="your-group" value="unit-in-group" ng-click="toggleModal();"/>Unit-in-group
 <modal title="some title" ng-show="showModal">

Other options:

You could also use ng-change instead of ng-click , which in this case wouldn't make much difference.

Or you could use ng-model ( ng-model="showModal" ) and get rid of your toggle function entirely Example .

Answer 2

Another approach would be to use the ngChange directive to detect that the checkbox got checked

<input type="checkbox" name="your-group" value="unit-in-group" ng-change="toggleModal();"/>

Code for modal remains the same as the other answer suggested

 <modal title="some title" ng-show="showModal">

Answer 3

I had a similar problem.

To detect a click use Angular syntax: (click)="toggleModal();"

<input type="checkbox" name="your-group" value="unit-in-group" (click)="toggleModal();"/>

I hope this helps.