是否可以从 Angular ng-click 表达式调用“alert()"或“console.log()"? [英] Possible to call 'alert()' or 'console.log()' from Angular ng-click Expression?

问题描述

我试图测试我的 ng-click 绑定是否有效——但我似乎遇到了一个更基本的问题——如何查看正在发生的事情(或没有发生).

I was trying to test if my ng-click binding was working -- but I seem to be running into a more-fundamental problem -- how to see what is happening (or not).

我通常使用的粗略"调试方法 alert() 和 console.log() 似乎不可用.

My usual 'crude' debugging methods, alert() and console.log(), do not seem to be available.

是否可以从 Angular 应用程序中访问这些功能或类似的功能?

Is it possible to get access to these functions or something like them from within an Angular app?

下面的 plnkr 示例似乎显示了单击事件 'working' -- 影响我组件中的对象 -- 但我的函数调用了 alert() 和 log() 似乎被忽视了.

The plnkr example below seems to show the click event 'working' -- effecting objects in my component -- but my function calls to alert() and log() seem to be getting ignored.

话虽如此，当我调用一个可能不存在的函数时，有没有办法获得某种错误消息?Chrome 控制台日志似乎没有显示任何内容.

With that said, is there a way to get some kind of error message when I call a probably-nonexistent function? The Chrome console log does not seem to show anything.

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

我认为可能重复"的问题是相似的，但它实际上并没有在标题中谈论 alert() 或 log()，并且各种部分答案似乎通常面向 Angular 1.x 和控制器 -- 我没有控制器.

I think the 'possibly-duplicate' question is similar, but it does not not actually talk about alert() or log() in the title, and the various partial answers seem generally geared towards Angular 1.x and controllers -- I do not have a controller.

这个问题的一部分是——我需要控制器吗?看起来可能有一种简单的方法来装饰"我的应用程序，但我现在只有模块和类，没有显式控制器.

So part of this question is -- do I need a controller? It looks like there might be an easy way to 'decorate' my app, but I only have modules and classes right now, no explicit controller.

谢谢.

我认为最好的答案是在底部 - 'ng-click' 必须提供一个表达式，而不是一个函数调用.

I think the best answer is at bottom -- 'ng-click' must be provided an expression, not a function call.

这里有一些格式正确的代码来展示如何在 Angular2 中调用这些基本函数(对于其他新手):

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

@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...');
    }
}

并从您的 HTML 中调用 doAlert() 方法:

and call the doAlert() method from your HTML:

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

谢谢！

推荐答案

ng-click 必须调用一个表达式.AngularJS 表达式不能直接访问全局变量，如窗口、文档或位置.这个限制是有意的.它可以防止意外访问全局状态 - 一个常见的细微错误来源.

ng-click must be call an expression. AngularJS expressions do not have direct 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.

这篇关于是否可以从 Angular ng-click 表达式调用“alert()"或“console.log()"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！