Можно вызвать "alert()" или "console.log()" из Angular ng-click Expression?

Я пытался проверить, работает ли привязка ng-click, но я, похоже, сталкиваюсь с более фундаментальной проблемой - как видеть, что происходит (или нет).

Мои обычные "грубые" методы отладки alert() и console.log(), похоже, недоступны.

Возможно ли получить доступ к этим функциям или чем-то вроде них из приложения Angular?

В приведенном ниже примере plnkr показано событие "working" - действие объектов в моем компоненте - но мои вызовы функций alert() и log() кажутся проигнорированными.

С учетом сказанного, есть ли способ получить какое-то сообщение об ошибке, когда я вызываю несуществующую функцию? Журнал консоли Chrome, похоже, ничего не показывает.

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

Я думаю, что вопрос "возможно-дубликат" схож, но на самом деле он не говорит об оповещении() или журнале() в заголовке, а различные частичные ответы, как правило, ориентированы на 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...');
    }
}

и вызовите метод doAlert() из вашего HTML:

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

Спасибо!

Ответы

Ответ 1

ng-click должен вызывать выражение. Выражения AngularJS не имеют прямого доступа к глобальным переменным, таким как окно, документ или местоположение. Это ограничение является преднамеренным. Это предотвращает случайный доступ к глобальному состоянию - общий источник тонких ошибок.

Ответ 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>

Ответ 3

Оба из них являются базовыми инструментами, предоставляемыми JS. Он должен быть доступен!

Если вы хотите отключить или оповестить HTML, это, вероятно, не очень хороший способ сделать это. И я не думаю, что это возможно.

Вы можете прикрепить свой HTML к контроллеру, а затем переместить Console.log или alert на этот контроллер. И он будет работать, как ожидалось.

Выражения AngularJS и выражения JavaScript

Выражения AngularJS похожи на выражения JavaScript со следующими отличиями:

Контекст: Выражения JavaScript оцениваются в окне global. В AngularJS выражения оцениваются с объектом scope.
- Руководство разработчика AngularJS - выражения AngularJS и выражения JavaScript

Ответ 4

Когда вы вызываете alert или console.log из ng-click, он ищет этот метод в выражении $scope или angular, и он не существует.

В вашем примере только count = count + 1 является выражением, а другие не являются ни функцией, ни выражением. Вот почему только счет увеличивается, а консоли или предупреждения не работают.

Если вам нужно использовать предупреждения и консольные журналы, используйте его внутри метода области.

Ответ 5

Быстрый и грязный способ получить доступ к alert и console.log из (click) или аналогичного обработчика - это псевдоним alert и console в объекте @Component:

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