Javascript 如何从 Angular.js 内联模板的脚本标签内部打印到 console.log？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32764895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to print to console.log from inside Angular.js inline-template's script tag?
提问by Melissa
I'm trying out the inline-template of Angular.js. I would like to have a way to debug Angular objects by printing to the console whenever an html page is rendered.
我正在尝试 Angular.js 的内联模板。我想有一种方法可以通过在呈现 html 页面时打印到控制台来调试 Angular 对象。
The inline-template puts html templates inside script tags. For example:
inline-template 将 html 模板放在脚本标签中。例如：
<script type="text/ng-template" id="/htmlpage.html">
<div class="page-header">
<h1>Title</h1>
</div>
<!-- everything else here is html too -->
</script>
It's tricky because the stuff inside the script tags is not really JavaScript anymore. So I don't know how to printing to the console inside the htmlpage.html with inline-template.
这很棘手，因为脚本标签中的内容不再是真正的 JavaScript。所以我不知道如何使用 inline-template 打印到 htmlpage.html 内的控制台。
I have tried but failed with nesting a script tag:
我已经尝试过嵌套脚本标签但失败了：
<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>
I also tried just throwing in a bare console.log, since it's inside a script tag.
我还尝试只放入一个空的 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>
but the entire line, console.log("this entire line gets output as text on the html page");, gets printed out to the html page, not the console!
但是整行, console.log("this entire line gets output as text on the html page");, 会打印到 html 页面，而不是控制台！
回答by T.Gounelle
You can achieve this by calling some debugging function defined in the controller scope with ng-initin the template definition. See this example.
您可以通过ng-init在模板定义中调用控制器作用域中定义的一些调试函数来实现这一点。请参阅此示例。
Let's say the template is defined by
假设模板定义为
<script type="text/ng-template" id="myTemplate.html">
<div ng-init="log('In template: '+$index)">{{greet}} Melissa<div>
</script>
and you have a controller defined as
你有一个控制器定义为
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);
}
}]);
then
然后
<ul ng-controller="myController">
<li ng-repeat="greet in greetings">
<div ng-include src="'myTemplate.html'"></div>
</li>
</ul>
should print in the console
应该在控制台打印
In template: 0
In template: 1
In template: 2
在模板中：0
在模板中：1
在模板中：2
The ng-initis called each time a template is instantiated. I just log some values available in the scope, like $indexwhich is the index in the ng-repeatloop.
在ng-init被称为每次模板实例的时间。我只是记录范围内的一些可用值，例如循环中$index的索引ng-repeat。
See this example.
请参阅此示例。
回答by mix3d
Using the above answer, I found the following simpler.
使用上面的答案，我发现以下更简单。
The easiest solution for me was to temporarily set
$scope.console = consolein my controller, letting the template have access to thewindow.consoleglobal variable and its associated functions as normal, through the$scopebinding
对我来说，最简单的解决方案是
$scope.console = console在我的控制器中临时设置window.console，通过$scope绑定让模板可以正常访问全局变量及其相关函数
Because the templates are tightly scoped, they do not have access to global and window variables, as a result console.X()is not available from the template. And, like you probably experienced, attempting to reference undefined values from within the template did not result in an error, just... nothing. (Cue tearing hair out trying to figure out why events aren't firing)
由于模板范围很窄，因此它们无法访问全局变量和窗口变量，因此console.X()无法从模板中获得。而且，就像您可能经历过的那样，尝试从模板中引用未定义的值不会导致错误，只是……什么也没有。（提示撕掉头发试图找出为什么事件没有触发）
