Question

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

我平常的＆＃39;原油＆＃39;调试方法alert()和console.log()似乎不可用。

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

下面的plnkr示例似乎显示了点击事件＆＃39; working＆＃39; - 影响我的组件中的对象 - 但我的函数调用alert()和log()似乎被忽略了。

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

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

我认为可能重复的＆＃39;问题是类似的，但它实际上并没有在标题中谈论alert（）或log（），各种部分答案似乎通常面向Angular 1.x和控制器 - 我没有控制器。

这个问题的一部分是 - 我需要一个控制器吗？看起来可能有一种简单的方法来装饰＆＃39;我的应用程序，但我现在只有模块和类，没有明确的控制器。

谢谢。

我认为最好的答案是在底部 - ＆＃39; ng-click＆＃39;必须提供表达式，而不是函数调用。

这里有一些格式正确的代码，用于说明如何在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表达式无法直接访问全局变量，如窗口，文档或位置。这种限制是故意的。它可以防止意外访问全局状态 - 这是微妙错误的常见来源。

Answer 2

alert（）和console.log（），似乎不可用。

alert()和console.log()都针对全局window对象进行评估。另一方面，ng-click是一个AngularJS表达式，并根据与之关联的scope进行评估，该window没有对scope对象的任何直接访问权限。因此$log内无法使用它们。

AngularJS Expressions vs. JavaScript Expressions

上下文： JavaScript表达式是针对全局窗口进行评估的。在AngularJS中，表达式是根据范围对象进行评估的。

AngularJS为此提供了一个名为$log的服务。您可以使用var myApp = angular.module('myApp',[]); myApp.controller('myController', ['$scope', '$log', function($scope, $log){ $scope.TestClick = function(){ $log.log('You have clicked'); } }])服务，如下所示：

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 3

这两者都是JS提供的基本工具。它应该可用！

如果您希望从HTML控制台或提醒，可能不是一个好方法。我认为这是不可能的。

您可以选择将HTML附加到控制器，然后将alert或global移动到该控制器。它将按预期工作。

AngularJS表达式与JavaScript表达式

AngularJS表达式就像JavaScript表达式，但有以下不同之处：


上下文： JavaScript表达式是针对scope窗口进行评估的。在AngularJS中，表达式是针对#animal对象进行评估的。


- AngularJS Developer Guide - AngularJS Expressions vs. JavaScript Expressions

Answer 4

当您从ng-click调用alert或console.log时，它会在$ scope或角度表达式中查找该方法，但它不存在。

在您的示例中，只有count = count + 1是表达式而其他都不是函数或表达式。这就是为什么只有计数增加，控制台或警报无法正常工作。

如果您需要使用警报和控制台日志，请在范围方法中使用它。

Answer 5

一种从alert或类似处理程序中访问console.log和(click)的快捷方法是将alert和console别名为@Component对象：

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

可以拨打＆＃39; alert（）＆＃39;或者＆＃39; console.log（）＆＃39;来自Angular ng-click Expression？

5 个答案:

AngularJS表达式与JavaScript表达式