可以从Angular ng-click Expression调用'alert()'或'console.log()'吗？

Question

我试图测试我的ng-click绑定是否有效 - 但我似乎遇到了一个更基本的问题 - 如何看待发生了什么(或不发生).

我通常的"粗"的调试方法,alert()并且console.log(),似乎并不可用.

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

下面的plnkr示例似乎显示了click事件'working' - 在我的组件中影响对象 - 但是我的函数调用alert()并且log()似乎被忽略了.

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

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

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

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

谢谢.

---

我认为最好的答案是在底部 - '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表达式无法直接访问全局变量,如窗口,文档或位置.这种限制是故意的.它可以防止意外访问全局状态 - 这是微妙错误的常见来源.

Answer 2

alert()和console.log(),似乎不可用.

双方alert()并console.log()正在对全球评估window对象.另一方面ng-click是AngularJS表达式,并根据scope与之关联的window对象进行评估,该对象没有任何对该对象的直接访问权限.因此,它们不在内部scope.

AngularJS Expressions vs. JavaScript Expressions

上下文: JavaScript表达式是针对全局窗口进行评估的.在AngularJS中,表达式是针对范围对象进行计算的.

AngularJS提供了$log为此目的而调用的服务.您可以使用$log以下服务:

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>