如何在AngularJS的上下文中使用Google Chrome Developer Tool在HTML代码中设置断点？

Question

我有以下HTML代码行，即：

<button ng-click="round.won=true" ng-class="{'active':round.won && !adjustedYesNo}" class="button button-outline">Gewonnen</button>

我不清楚，单击按钮并触发ng-click-event时，在哪个文件中调用了哪个函数。

所以我想知道如何在ng-click="round.won=true"旁边的Google Chrome开发者工具中设置一个断点，以便跳转到相关的Javascript-function /文件？

Answer 1

您无法在HTML代码上设置断点。但是，如果您的代码如下所示：

<强> HTML

＆＃13;

＆＃13;

<button ng-click="winRound()" ng-class="{'active':round.won && !adjustedYesNo}" class="button button-outline">Gewonnen</button>

＆＃13;

＆＃13;

＆＃13;

<强>控制器

app.controller(function($scope) {
  $scope.winRound = function() {
     $scope.round.win = true;
  }
});

然后你可以在JS文件的winRound函数中设置一个断点。但请确保您的JS代码（控制器）位于单独的JS文件中，而不是放在HTML中的脚本标记内。