Angular.js inline-templateのscriptタグからconsole.logに印刷するには？

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内のコンソールにinline-templateで印刷する方法がわかりません。

私が試みたが、スクリプトタグを入れ子にして失敗した：

<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テンプレートに

：0
テンプレート：1
テンプレート：2

ng-initは、テンプレートがインスタンス化されるたびに呼び出されます。私はng-repeatループのインデックスである$indexのようなスコープ内で利用可能ないくつかの値をログに記録します。

this exampleを参照してください。