“x is not defined” when call a javascript function

Question

I have code like this:

  <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>

In 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);
        }

I want x.detail as an input parameter for window.viewOrderDetails.

But when I click button "Order detail", it's said "x is not defined". I want to know where problem is. Thanks.

Answer 1

尝试如下更改您的点击处理程序：

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

Answer 2

您必须将x.detail括在花括号中

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

Answer 3

It's a little hard to tell but what I'm guessing the problem here is that the x isn't being parsed because onclick is just a vanilla javascript expression, not an angular expression. What's the difference?

Something like what you have now is pure javascript, while angular has it's own language (that's very, very close to javascript) it uses in it's directive expressions. X means something to Angular, but not to regular javascript. So how to fix this? In two ways.

The first is you can change your button element to add an ng-click. Like so.

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

And then add a method to your controller for the following.

    $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);
    }

So now, since angular sees that it has an ng-click directive, it'll know to parse x as one of the current objects in the array you're iterating through.

As others have said, you can also use this.

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

Which is completely valid, but I think if you're going to build an app in angular, you should probably put something like viewOrderDetails IN the controller and make it part of angular. It's just better organization.

But the way this works is that the {{ }} tell angular to interpolate and parse whatever is in them. So while angular isn't evaluating the whole javascript expression on click, it now knows to go ahead and replace the x in the {{}} with the correct object because it'll try parse whatever it sees in those braces.