ng-click is not firing in AngularJS

Question

here is angularJS code:

angular.module("app")
.controller("myController", function ($scope) {

    $scope.addDashboard = function() {
        alert('done');
    }
});

and here is html code:

<ul class="sidebar-nav nav-stacked" id="menu" ng-app="app">

    <li class="dashboard" ng-controller="myController">
        <a id="dashboard_link">
            <span class="fa-stack fa-lg pull-left">
               <i class="fa fa-dashboard fa-stack-1x text-success"></i>
            </span>DASHBOARDS   
            <i class="fa fa-plus fa-stack-18" id="test" 
               ng-click="addDashboard()">
            </i>
         </a>
    </li>
 </ul>

it didn't fire when icon is clicked! any idea why this is not working?

Check your console for the error. As you didn't initialise the angular module with the empty dependencies, it failed to initialise. — Vamsi
– Vamsi, Commented Mar 24, 2017 at 6:00
change module to this angular.module("app",[]) plnkr.co/edit/R4y1KBZ7eQCzV3hdlbED?p=preview — Sachila Ranawaka
– Sachila Ranawaka, Commented Mar 24, 2017 at 6:02

Sajeetharan · Accepted Answer · 2017-03-24 06:09:41Z

1

Your module should have empty dependency injected,

angular.module("app",[])
.controller("myController", function ($scope) {

}

DEMO

angular.module("app",[]).controller("myController", function ($scope) {

$scope.addDashboard = function() {
    alert('done');
}
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="//code.angularjs.org/1.4.7/angular.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <ul class="sidebar-nav nav-stacked" id="menu" ng-app="app">

    <li class="dashboard" ng-controller="myController">
        <a  id="dashboard_link"><span class="fa-stack fa-lg pull-left"   ><i class=" fa-plus fa-stack-18"  ng-click="addDashboard()"></i></span>DASHBOARDS   <i class="fa fa-plus fa-stack-18" id="test" ng-click="addDashboard()"></i></a>
    </li>
 </ul>
</body>

</html>

edited Mar 24, 2017 at 6:09

answered Mar 24, 2017 at 5:57

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

Ved Over a year ago

It is not mendatory to move ng-click out .

Saif Over a year ago

if appalready registered in project? shall I register it again?

Sajeetharan Over a year ago

@Saif Not necessary

Saif Over a year ago

error Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?p0=myController&p1=not%20aNaNunction%2C%20got%20undefined

Sajeetharan Over a year ago

did you refer the controller.js file?

|

jitender · Accepted Answer · 2017-03-24 06:00:44Z

0

You should put addDashboard mathod in a tag something like:- This fiddle

<a id="dashboard_link" ng-click="addDashboard()">

Your code also working find try to put some sample text in i element on which you put addDashboard method

answered Mar 24, 2017 at 6:00

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Comments

Ashish Mehta · Accepted Answer · 2017-03-24 06:03:25Z

var app = angular.module('app', []);
app.controller("myController", function($scope) {
  $scope.addDashboard = function() {
    alert('done');
  }
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul class="sidebar-nav nav-stacked" id="menu" ng-app="app">

  <li class="dashboard" ng-controller="myController">
    <a id="dashboard_link">
      <span class="fa-stack fa-lg pull-left">
    <i class="fa fa-dashboard fa-stack-1x text-success"></i>
    </span> DASHBOARDS
      <i class="fa fa-plus fa-stack-18" id="test" ng-click="addDashboard()"></i>
    </a>
  </li>
</ul>

Janen R · Accepted Answer · 2017-03-24 06:04:04Z

0

whether you are using dependency injection or not ,you should implement atleast the empty injection angular.module("app",[]) .controller("myController", function ($scope) {

Its only the standard syntax for creating global namespace as well as module

answered Mar 24, 2017 at 6:04

Janen R

7491 gold badge11 silver badges21 bronze badges

Comments

Rohìt Jíndal · Accepted Answer · 2017-03-24 09:33:50Z

First need to understand the difference between angular.module('app', []) and angular.module('app')

angular.module('app', [])

It will create a new module of the name app, where the array([]) is the set of dependent modules.

angular.module('app')

Used to retrieve an existing module of the name app.

Hence, In your case you have to use angular.module('app', []) as you are creating the new module.

DEMO

angular.module("app",[])
.controller("myController", function ($scope) {
$scope.addDashboard = function() {
    alert('done');
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul class="sidebar-nav nav-stacked" id="menu" ng-app="app">
    <li class="dashboard" ng-controller="myController">
        <a id="dashboard_link" ng-click="addDashboard()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x text-success"></i></span>DASHBOARDS<i class="fa fa-plus fa-stack-18" id="test" ></i></a>
    </li>
 </ul>

Collectives™ on Stack Overflow

ng-click is not firing in AngularJS

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related