我正在试用 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 页面,而不是控制台!
最佳答案
您可以通过在模板定义中使用 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 .
关于javascript - 如何从 Angularjs 内联模板脚本标记内打印到 console.log?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32764895/