angularjs - 可以从 Angular ng-click 表达式调用 'alert()' 或 'console.log()' 吗？

Question

我试图测试我的 ng-click 绑定(bind)是否正常工作 - 但我似乎遇到了一个更基本的问题 - 如何查看发生了什么(或没有发生)。

我常用的“粗略”调试方法，alert() 和 console.log()，似乎不可用。

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

下面的 plnkr 示例似乎显示了点击事件“正在运行”——影响我的组件中的对象——但我的函数调用了 alert() 和 log() 似乎被忽视了。

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

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

我认为“可能重复”的问题是类似的，但它实际上并没有在标题中讨论alert()或log()，并且各种部分答案似乎通常适合Angular 1.x和 Controller - - 我没有 Controller 。

所以这个问题的一部分是——我需要 Controller 吗？看起来可能有一种简单的方法来“装饰”我的应用程序，但我现在只有模块和类，没有显式 Controller 。

谢谢。

<小时/>

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

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

@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() 方法:

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

谢谢!

Answer 1

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