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

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>

if appalready registered in project? shall I register it again?
error Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?p0=myController&p1=not%20aNaNunction%2C%20got%20undefined

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

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Related