AngularJS - ng-click buttons not working

Question

I am new to AngularJS. I'm trying to toggle a modal into view using ng-if and ng-click.

Essentially, in my controller, I have a scoped variable called "aboutOn". When it is true, the modal is displayed. When it's false, it's not. Simple.

The ng-if part works. But the ng-click part is causing trouble. Sometimes, it just doesn't work.

To open the modal I have this:

<div id="about-link-container" ng-click="aboutOn=true">
  <p><i class="far fa-info-circle"></i>&nbsp;&nbsp;About</p>
</div>

This does not work how I want it to work. If I click on the actual text, nothing happens. It only triggers when I click around the border, not directly on the link. If I put the ng-click on the p tag, it doesn't work at all.

Then inside the modal, I have this to close it:

<div class="about-close">
     <i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>

This doesn't work at all. What's going on here? Here is my controller, if that's possibly related:

angular.module('myApp', [])
.controller('myController', ['$scope', function myController($scope) {
    $scope.female_name = "female name"; 
    $scope.position = "position"; 
    $scope.tedious_task = "tedious task"; 
    $scope.dirty_task = "dirty task"; 
    $scope.female_name = "female name"; 
    $scope.celebrity = "celebrity"; 
    $scope.useless_skill = "useless skill"; 
    $scope.aboutOn = false; 
}]);

Here is the entire view:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link href="https://fonts.googleapis.com/css?family=Gamja+Flower|Oswald" rel="stylesheet">
        <script data-require="[email protected]" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
        <script src="main.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body ng-app="myApp">
        <div ng-controller='myController'>
            <div class="form">
                <div id="about-link-container" ng-click="aboutOn=true">
                    <p><i class="far fa-info-circle"></i>&nbsp;&nbsp;About</p>
                </div>
                <h1>M<img src="angular-logo.png" class="logo" />DLIBS</h1>
                <div class="form-inner">
                    <h2>Provide the following words:</h2>         
                    <input ng-model="female_name" />
                    <input ng-model="position" />
                    <input ng-model="tedious_task" />
                    <input ng-model="dirty_task" />
                    <input ng-model="celebrity" />
                    <input ng-model="female_name" />
                    <input ng-model="useless_skill" />
                </div>
            </div>
            <div class="display">
                <p>{{ female_name }} was a {{ position }}. Although she loved parts of her job, 
                    she absolutely hated {{tedious_task}} and {{dirty_task}}. So, {{female_name}} met 
                    with her life mentor {{celebrity}} who told her to learn how 
                    to {{useless_skill}} at school. Her school didn't offer a 
                    course on {{useless_skill}} so she studied programming instead. 
                </p> 
            </div>

            <div ng-if="aboutOn" class="about">
                <div class="about-main">
                        <div class="about-close">
                            <i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
                        </div>
                            <h2 class="about-title"><i class="fas fa-info-circle"></i>&nbsp;&nbsp;About</h2>
                            <p class="about-p">Madlibs is an AngularJS application. When user fill in the words in 
                                the form above, those words will automatically populate the paragraph below. 
                                Try different combinations!
                            <br />
                            <br />
                            This application was made in 2018 by Jack Seabolt. It was constructed using AngularJS.     
                            </p>   
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Aleksey Solovey · Accepted Answer · 2018-04-11 15:16:23Z

1

There are two problems that give you this issue.

ng-if creates its own scope.

So if you want to reach controller's scope, you need to have ng-click="$parent.aboutOn=false"

FA icons replace DOM (?). You cannot have ng-click on an icon.

Wrap your icon with <div> (as you already do) and put ng-click on it

The code that you need to change, from this:

<div class="about-close">
  <i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>

to this:

<div class="about-close" ng-click="$parent.aboutOn=false">
  <i class="fas fa-times about-close-icon"></i>
</div>

answered Apr 11, 2018 at 15:16

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

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

4 Comments

J Seabolt Over a year ago

Thank you! Any thoughts about how to get the click to happen on* the icon, not just next to it? In React, I have to use a surrounding div too, but it still works on child elements. That seems to not be the case here. There must be a way to use icons in Angular?

J Seabolt Over a year ago

The X works. But the About with the icon I have to click the outside of the link (the div I assume)

Aleksey Solovey Over a year ago

@JSeabolt surround it with <span> instead

Aleksey Solovey Over a year ago

or specify its width with CSS (style / class)

Collectives™ on Stack Overflow

AngularJS - ng-click buttons not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related