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调用控制器作用域中定义的某些调试函数来实现此目的。请参阅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>

应该在控制台中打印

在模板中：0
  在模板中：1
  在模板中：2

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

请参阅this example。

Answer 2

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

对我来说，最简单的解决方案是在控制器中临时设置$scope.console = console，让模板可以通过window.console绑定正常访问$scope全局变量及其关联功能

由于模板的范围很狭窄，因此它们无法访问全局变量和窗口变量，因此模板中无法使用console.X()。而且，就像您可能经历过的那样，尝试从模板中引用未定义的值不会导致错误，只是...什么都没有。（提示，试图弄清楚事件为什么不触发的原因）

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

2 个答案: