Как печатать на console.log из тега Angular.js inline-template script?

Я пытаюсь создать встроенный шаблон Angular.js. Я хотел бы иметь способ отлаживать объекты Angular, печатая на консоль всякий раз, когда отображается html-страница.

Встроенный шаблон помещает html-шаблоны в теги script. Например:

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

Это сложно, потому что материал внутри тегов script больше не является JavaScript. Поэтому я не знаю, как печатать на консоли внутри htmlpage.html с встроенным шаблоном.

Я попытался, но не смог с вложением тега script:

<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.

<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, а не на консоль!

Ответ 1

Вы можете добиться этого, вызвав некоторую функцию отладки, определенную в области управления, с помощью ng-init в определении шаблона. См. этот пример.

Скажем, шаблон определяется

<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>

должен печатать на консоли

В шаблоне: 0
В шаблоне: 1 | В шаблоне: 2

ng-init вызывается каждый раз при создании экземпляра шаблона. Я просто регистрирую некоторые значения, доступные в области видимости, например $index, который является индексом в цикле ng-repeat.

См. этот пример.