呼叫JavaScript功能時

我有這樣的代碼：呼叫JavaScript功能時

<ion-content> 
    <ion-list> 
     <ion-item > 訂單號 餐桌 顧客姓名 顧客電話號碼 配送地址 訂單備註 下單時間 </ion-item> 
     <ion-item ng-repeat="x in orders|orderBy:'order_id'"> 
     {{ x.order_id + ', ' + x.table_id+', '+x.name+', '+x.phone+', '+x.address+', '+x.remark+', '+changTimetoString(x.ctime)}} 
     <button onclick="window.viewOrderDetails(x.detail)">Order detail</button> 
     </ion-item> 
    </ion-list> 
    </ion-content>

在app.js：

app.controller('customersController', ['$scope', '$http', function($scope,$http) { 
      $http.get("http://18ff2f50.tunnel.mobi/yii2-basic/tests/Customers_JSON.json") 
      .success(function (response) 
      { 
      console.log("debug",response); 
      $scope.orders = response; 
      }); 

window.viewOrderDetails = function viewOrderDetails(detail) { 
      var newWin = open('orderdetails.html','windowName','height=300,width=300'); 
      newWin.document.write('html to write...'); 
      newWin.document.write(detail); 
     }

欲x.detail作爲窗口的輸入參數。查看訂單詳情。

但是，當我點擊按鈕「訂單明細」，它說「x未定義」。我想知道問題在哪裏。謝謝。

來源

2015-08-25 Isaac Li

你能說明代碼是「訂單」嗎？ – OceansOnPluto

爲什麼你需要'onclick'在角度應用程序的中間？ – charlietfl

你可以用'ng-click'替換'onclick'嗎？另外儘量不要使用window作爲你的controllerAs名字，一般window.something在javascript中有特殊的含義。 – Icycool

這一點很難說，但我猜問題這裏是x不被解析，因爲onclick只是一個香草javascript表達式，而不是一個角度表達式。有什麼不同？

你現在擁有的東西就是純粹的javascript，而angular有它自己的語言（它非常非常接近javascript），它在它的指令表達式中使用。 X對Angular而言意味着某種東西，但對於普通的JavaScript來說則不然那麼如何解決這個問題？有兩種方法。

首先是您可以更改您的button元素以添加ng-click。像這樣。

<button ng-click="viewOrderDetails(x.detail)">Order detail</button>

然後爲您的控制器添加以下方法。

$scope.viewOrderDetails = function viewOrderDetails(detail) { 
     var newWin = open('orderdetails.html','windowName','height=300,width=300'); 
     newWin.document.write('html to write...'); 
     newWin.document.write(detail); 
    }

所以，現在，因爲角度看，它有一個ng-click指令，它會知道解析X爲你迭代通過數組中的當前對象之一。

正如其他人所說，你也可以使用它。

<button onclick="window.viewOrderDetails({{x.detail}})">Order detail</button>

這是完全有效的，但我認爲，如果你要建立一個角度應用程序，你應該把類似viewOrderDetails在控制器中，並使其角部分。這只是更好的組織。

但是，這種方式的工作方式是{{ }}告訴角度來插入和解析它們中的任何內容。所以雖然angular並沒有在點擊時評估整個javascript表達式，但它現在知道繼續，用正確的對象替換{{}}中的x，因爲它會嘗試解析它在大括號中看到的任何內容。

來源

2015-08-25 03:10:33 OceansOnPluto

感謝@OceansOnPluto，當我嘗試第一種方式時，窗戶沒有出現;當我嘗試第二種方式時，窗口出現，但內容是「html寫... {{x.detail}}」，似乎x.detail的值沒有正確輸入。 –

啊，你知道嗎？刪除引號。所以它應該是'viewOrderDetails（{{x.detail}}）'。我會編輯答案。這應該工作。 – OceansOnPluto

感謝@OceansOnPluto，第一種方式現在適合我！ –

試着改變你的點擊處理程序如下：

<button onclick="window.viewOrderDetails('{{ x.detail }}')">Order detail</button>

來源

2015-08-25 01:36:45

謝謝，現在窗口來了，但內容是「HTML寫... {{x.detail}}」，它似乎沒有正確輸入x.detail的值？ –

你必須附上x.details在大括號

<button onclick="window.viewOrderDetails('{{x.detail}}')">Order detail</button>

來源

2015-08-25 01:43:18

你的答案和第一個答案有什麼區別？ –

謝謝，現在窗口出現了，但內容是「html寫... {{x.detail}}」，看起來x.detail的值是不是輸入正確？ –

呼叫JavaScript功能時

回答

相關問題