CODEWITHSUNDEEP
javascriptangularjsonclick
FlavorScape
FlavorScape

Reputation: 14309

Why is ng-click not working?

Why on earth wont this simple ng-click example work? I've been using angular for months in production, but this plunker is baffling me.

http://plnkr.co/edit/9Rp5JD?p=preview

If you notice, the ng-show properties are working... why isn't the click? It always alerts the default and not the angular click.

<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>

there's no isolated scope, no directive at all... just a div. You can remove the onclick.... the other alert never fires. I'm sure whatever the problem is, I've become too myopic to find it.

the rest of the boring config:

angular.module('plunker', []);

var app = angular.module('plunker', [
    'plunker'
]);



app.config( function( ) {
        'use strict';
});



app.controller('MainCtrl', function($scope) { 
  var that = this;

  $scope.showTest = true;

});

the whole html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.2.6/angular.js" data-semver="1.2.25"></script>

  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">

<br/><br/>

<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>


</html>

Upvotes: 5

Views: 12335

Answers (2)

Patrick Evans
Patrick Evans

Reputation: 42736

Angular's expressions do not use the eval function so unless you have defined a function named alert in your scope chain somewhere it will not execute.

https://docs.angularjs.org/guide/expression#context

Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.

Angular expressions do not have access to global variables like window, document or location. This restriction is intentional. It prevents accidental access to the global state – a common source of subtle bugs.

Instead use services like $window and $location in functions called from expressions. Such services provide mockable access to globals.

So you would have to define such a function on your scope:

app.controller('MainCtrl', function($scope,$window) { 
  var that = this;

  $scope.showTest = true;
  $scope.alert = function() {
    $window.alert('angular click');
  };
});

DEMO

angular.module('plunker', []);

var app = angular.module('plunker', [
    'plunker'
]);

app.config( function( ) {
        'use strict';
});

app.controller('MainCtrl', function($scope,$window) { 
  var that = this;

  $scope.showTest = true;
  $scope.alert = function(text){
     $window.alert(text);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>
</div>

Upvotes: 7

rchang
rchang

Reputation: 5236

Added an alert attribute to your controller definition:

app.controller('MainCtrl', function($scope) { 
  var that = this;

  $scope.showTest = true;

  $scope.alert = function(msg) {
    alert(msg);
  };
});

I think the issue is that the ng-click directive will automatically interpret whatever you put inside in the scope of the controller object. So if the controller doesn't have an alert attribute, nothing happens.

Upvotes: 5

Related Questions