CODEWITHSUNDEEP
javascriptangularjsionic-framework
Isaac Li
Isaac Li

Reputation: 155

"x is not defined" when call a javascript function

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.

Upvotes: 0

Views: 296

Answers (3)

whatoncewaslost
whatoncewaslost

Reputation: 2256

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.

Upvotes: 0

Happy Coding
Happy Coding

Reputation: 2525

You have to enclose x.details in curly braces

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

Upvotes: 1

Andrew Shepherd
Andrew Shepherd

Reputation: 45222

Try changing your click handler as follows:

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

Upvotes: 1

Related Questions