如何在類型=“ 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}}並顯示如下： 在此處輸入鏈接描述

但是我發現javascript無法在“ <script id="templates/orderdetails.html" type="text/ng-template"> “內運行，該怎么辦？ 謝謝。

Answer 1

這行不通。 相反，只需在模板內使用Angular ng-repeat即可生成表。

Answer 2

您可以像這樣將以下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變量中的每個項目呈現necesarry表行。 之后，您將需要在控制器中定義$scope.obj ，因為您的角度應用程序會尋找該對象。 我認為只是definig var obj無法正常工作，但我從來沒有那樣使用過。

Answer 3

我假設您使用的是ui-bootstrap-modal（文本/ ng-template），因此您可以通過使用resolve功能將想要使用的對象傳遞到模態的controller中。

var modalInstance = $modal.open({
            animation: true,
            templateUrl: 'xml-feed.html',
            controller: function($modalInstance,  detail) { 
                this.detail = detail;

                this.close= function () {
                    $modalInstance.close();
                }
            },
            controllerAs: 'myModal',
            size: 'lg',
            resolve: {
                detail: function () {
                    //here you will need to return a reference
                    //I assumed the modal is opened in a controller
                    //that already has the detail object on its scope
                   return $scope.detail;
                }
            }

        });

在模態HTML中，您可以簡單地以有角度的方式使用對象。

<table>
  <thead>
    <tr>
      <th>菜名</th><th>單價</th><th>份數</th><th>小計</th>
    </tr>
  </thead>
  <tbody>
        <tr><td>{{myModal.detail}}</td><tr> //do what you need with this object
  </tbody>
</table>

PS我在模態中使用controllerAs語法。