如何从 Angular.js 内联模板的脚本标签内打印到 console.log？

Question

我正在试用 Angular.js 的内联模板。 我想有一种方法来调试 Angular 对象，只要呈现 html 页面就打印到控制台。

内联模板将 html 模板放在脚本标签内。例如：

<script type="text/ng-template" id="/htmlpage.html">
  <div class="page-header">
    <h1>Title</h1>
  </div>
  <!-- everything else here is html too -->
</script>

这很棘手，因为脚本标签内的内容不再是 JavaScript。 所以我不知道如何使用内联模板打印到 htmlpage.html 内的控制台。

我尝试过嵌套脚本标签但失败了：

<script type="text/ng-template" id="/htmlpage.html">
  <!-- html page template Angular stuff before is okay -->

  <script>console.log("this line DOESN'T SHOW UP anywhere");</script>

  <!-- html page template Angular stuff AFTERWARDS ALL FAIL-->
</script>

我也试过只放入一个裸体 console.log，因为它在脚本标签内。

<script type="text/ng-template" id="/htmlpage.html">
  <!-- rest of html page template is okay -->

  console.log("this entire line gets output as text on the html page");

  <!-- rest of html page template is okay -->
</script>

但是整行 console.log("this entire line gets output as text on the html page"); 被打印到 html 页面，而不是控制台！

Answer 1

您可以通过在模板定义中使用 ng-init 调用在控制器作用域中定义的一些调试函数来实现此目的。参见 this example。

假设模板由

定义

<script type="text/ng-template" id="myTemplate.html">
  <div ng-init="log('In template: '+$index)">{{greet}} Melissa<div>
</script>

并且您有一个定义为

的控制器

var app = angular.module('myApp', [])
  .controller('myController', ['$scope', '$log', function($scope, $log) {
    $scope.greetings = ["Hello", "Bonjour", "Guten tag"];
    $scope.log = function(message) {
      $log.debug(message);
    }
  }]);

然后

<ul ng-controller="myController">
  <li ng-repeat="greet in greetings">
    <div ng-include src="'myTemplate.html'"></div>
  </li>
</ul>

应该在控制台打印

In template: 0
In template: 1
In template: 2

每次实例化模板时都会调用ng-init。我只是记录范围内的一些可用值，例如 $index 这是 ng-repeat 循环中的索引。

见this example。

Answer 2

使用上面的答案，我发现下面的更简单。

The easiest solution for me was to temporarily set $scope.console = console in my controller, letting the template have access to the window.console global variable and its associated functions as normal, through the $scope binding

由于模板的范围很窄，它们无法访问全局变量和 window 变量，因此 console.X() 无法从模板中获得。而且，就像您可能经历过的那样，尝试从模板中引用未定义的值并没有导致错误，只是……没有。（提示撕扯头发试图找出事件未触发的原因）

如何从 Angular.js 内联模板的脚本标签内打印到 console.log？

How to print to console.log from inside Angular.js inline-template's script tag?

html

javascript

debugging

console

angularjs