Can I call "alert ()" or "console.log ()" from Angular ng-click Expression?

Question

I tried to check if the ng-click binding works, but I seem to run into a more fundamental problem - how to see what happens (or not).

My usual “rough” debugging methods alert() and console.log() seem to be unavailable.

Is it possible to access these functions or something like them from an Angular application?

The plnkr example below shows the "working" event - the action of objects in my component - but my calls to the alert() and log() functions seem ignored.

With that said, is there a way to get some kind of error message when I call a function that doesn't exist? The Chrome console log seems to be showing nothing.

https://embed.plnkr.co/Dvadi8mWlUqTUW865UsI/

I think the “possibly duplicate” question is similar, but in fact it does not speak of an alert () or log () in the header, and various partial answers are usually oriented to Angular 1.x and the controllers - I don’t have the controller.

So part of this question is - do I need a controller? It seems that there may be an easy way to “decorate” my application, but now I only have modules and classes, there is no explicit controller.

Thanks.

---

I think the best answer below is "ng-click", an expression should be provided, not a function call.

and here is some properly formatted code to show how to call these basic functions in Angular2 (for other newbies):

 @Component({ selector: 'app-root', templateUrl: './app.component.html', //template:`<h2>Hello, world</h2>` , styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Quiz Tool'; quiz = new Quiz(); doAlert(){ console.log('log: test log, yo...'); // black console.debug('debug: test log, yo...'); // blue console.warn('warn: test log, yo...'); // yellow console.info('info: test log, yo...'); // black (with 'i' icon) console.error('error: test log, yo...'); // red alert('test...'); } } 

and call the doAlert () method from your HTML:

 <button (click)="doAlert();count = count + 1" ng-init="count=0">Increment</button> 

Thanks!

Answer 1

ng-click should call an expression. AngularJS expressions do not directly access global variables such as a window, document, or location. This restriction is intentional. This prevents accidental access to global state - a common source of subtle errors.

Answer 2

alert () and console.log () are apparently unavailable.

Both alert() and console.log() compared to the global window object. On the other hand, ng-click is an AngularJS expression and is evaluated by the scope mapped to it, which does not have direct access to the window object. Therefore, they are not available inside scope .

AngularJS Expressions vs. JavaScript Expressions

Context: JavaScript expressions are compared to the global window. In AngularJS, expressions are evaluated relative to a scope object.

For this purpose, AngularJS provides a service called $log . You can use the $log service as follows:

 var myApp = angular.module('myApp',[]); myApp.controller('myController', ['$scope', '$log', function($scope, $log){ $scope.TestClick = function(){ $log.log('You have clicked'); } }]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myController"> <input type="button" value="Click" ng-click="TestClick()"/> </div> 

Answer 3

Both of these are basic tools provided by JS. It must be available!

If you want to disable or notify HTML, this is probably not a good way to do this. And I do not think that this is possible.

You can attach your HTML to the controller, and then move Console.log or alert to that controller. And it will work as expected.

---

AngularJS expressions and JavaScript expressions

AngularJS expressions are similar to JavaScript expressions with the following differences:

• Context: JavaScript expressions are evaluated in the global window. In AngularJS, expressions are evaluated with a scope object.

- AngularJS Developer's Guide - AngularJS expressions and JavaScript expressions

Answer 4

When you call alert or console.log from ng-click, it looks for this method in a $ scope or angular expression, and it does not exist.

In your example, only count = count + 1 is an expression, while others are neither a function nor an expression. This is why only the score increases, and the consoles or warnings do not work.

If you need to use warnings and console logs, use it inside the scope method.

Answer 5

A quick and dirty way to access alert and console.log from (click) or a similar handler is with the alert and console alias in the @Component object:

 @Component({ // ... }) export class MyComponent { constructor() { // ... this.console = window.console this.alert = window.alert } }