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

我正在尝试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页面，而不是控制台！

3021

2017-09-24 15:09

起源

您可以将文本添加到.js文件中的$ scope，然后添加到html add {{$ scope.WhatEverTextYouWant}} - user4321

答案:

您可以通过调用控制器作用域中定义的一些调试函数来实现此目的 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 循环。

看到这个例子。

2017-09-24 16:09

是的，如果这是动态ng-repeat，那么只记录初始值吗？ - AlxVallejo

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？

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

答案:

热门问题

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