javascript - 如何从 Angularjs 内联模板脚本标记内打印到 console.log？

Question

我正在试用 Angular.js 的内联模板。 我希望有一种方法可以通过在呈现 html 页面时打印到控制台来调试 Angular 对象。

内联模板将 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 调用在 Controller 作用域中定义的一些调试函数来实现此目的。参见 this example .

假设模板由

定义

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

你有一个 Controller 定义为

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 .