Menu
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>
303
Definition and Usage. The ng-click directive tells AngularJS what to do when an HTML element is clicked.
ng command not recognized after installing the Angular CLI. ‘ng’ is not recognized as an internal or external command, operable program or batch file. This error I found to be due to improper installation or configuration of Angular CLI in the local machine.
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. Angular does not use JavaScript's eval () to evaluate expressions. Instead Angular's $parse service processes these expressions.
‘ng’ is not recognized as an internal or external command, operable program or batch file.
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>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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
