如何在AngularJS上下文中使用Google Chrome开发者工具在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函数/文件吗？

Answer 1

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

的HTML

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

控制者

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

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