web-dev-qa-db-ja.com

Angularjsインラインテンプレートスクリプトタグ内からconsole.logに印刷する方法は？

Angular.jsのインラインテンプレートを試しています。 HTMLページがレンダリングされるたびにコンソールに印刷することにより、Angularオブジェクトをデバッグする方法が必要です。

Inline-templateは、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>
_

スクリプトタグ内のものは実際には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>
_

また、スクリプトタグ内にあるため、bares.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ページに出力されます！

javascripthtmlangularjsdebuggingconsole
13
Melissa

これを実現するには、テンプレート定義で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のように、スコープで使用可能な値をいくつか記録するだけです。

この例 を参照してください。

14
T.Gounelle

上記の答えを使用すると、次の方が簡単であることがわかりました。

私にとって最も簡単な解決策は、一時的にコントローラに_$scope.console = console_を設定し、テンプレートが_window.console_バインディングを介して通常どおり_$scope_グローバル変数とその関連関数にアクセスできるようにすることでした

テンプレートのスコープは厳密であるため、グローバル変数およびウィンドウ変数にアクセスできません。その結果、テンプレートからconsole.X()を使用できません。そして、おそらくあなたが経験したように、テンプレート内から未定義の値を参照しようとしてもエラーにはなりませんでした...ただ何もしませんでした。 （イベントが発生しない理由を理解しようとして髪を引き裂くキュー）

1
mix3d