javascript - 如何在类型为="text/ng-template"的页面中使用javascript？

Question

我有这样的代码:

<script id="templates/orderdetails.html" type="text/ng-template">

    <ion-view view-title="OrderDetails">

        <ion-content class="padding">

            <p>Here I want to display order details...</p>

            {{ detail }}

<script type="text/javascript">
            var obj = JSON.parse( {{ detail }} );

            document.write('<table>');
            document.write('<thead>');
            document.write('<tr>');
            document.write('<th>菜名</th><th>单价</th><th>份数</th><th>小计</th>');
            document.write('</tr>');
            document.write('</thead>');
            document.write('<tbody>');

            document.write('</tbody>');
            document.write('</table>');

            for(id in obj) {
                document.write(obj[id]["name"]);
                document.write(" ");
                document.write(obj[id]["price"]);
                document.write(" ");
                document.write(obj[id]["num"]);
                document.write(" ");
                document.write(obj[id]["total"]);
                document.write("<br>");
            }
</script>
            <p>
                <a class="button icon ion-home" href="#/tab/home"> Home</a>
            </p>

</ion-content>
</ion-view>

</script>

我希望 {{Detail}} 被解析并显示如下: enter link description here

但是我发现 javascript 在“<script id="templates/orderdetails.html" type="text/ng-template">”中无法工作，我该怎么做？谢谢。

Answer 1

您可以更好地将以下 table-html 添加到您的模板中，如下所示:

<table>
  <thead>
    <tr>
      <th>菜名</th><th>单价</th><th>份数</th><th>小计</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="id in obj">
       <td>{{name}}</td>
       <td>{{price}}</td>
       <td>{{num}}</td>
       <td>{{total}}</td>
    </tr>
  </tbody>
</table>

Ng-Repeat 将为 obj 变量中的每个项目渲染必要的表行。之后，您需要在 Controller 中定义 $scope.obj 因为您的 Angular 应用程序会查找它。我认为仅仅定义 var obj 是行不通的，但我从来没有这样使用过它。