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

Can you replace onclick with ng-click? Also try not to use window as your controllerAs name, generally window.something has special meaning in javascript. — Icycool
– Icycool, Commented Aug 25, 2015 at 2:45
@lcycool, i replaced onclick with ng-click, the error "x is not defined" is gone, but window didn't come up as expected. — Isaac Li
– Isaac Li, Commented Aug 25, 2015 at 3:05
Hi, @charlietfl, do you mean I need replace onclick with ng-click? I've tried, but window didn't come up. — Isaac Li
– Isaac Li, Commented Aug 25, 2015 at 3:22

Andrew Shepherd · Accepted Answer · 2015-08-25 01:36:45Z

1

Try changing your click handler as follows:

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

answered Aug 25, 2015 at 1:36

Andrew Shepherd

45.5k33 gold badges148 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Isaac Li Over a year ago

Thanks, now window come up, but content is " html to write...{{x.detail}}", it seems the value of x.detail is not input correctly?

Happy Coding · Accepted Answer · 2015-08-25 01:43:18Z

1

You have to enclose x.details in curly braces

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

answered Aug 25, 2015 at 1:43

Happy Coding

2,5151 gold badge15 silver badges24 bronze badges

2 Comments

Oli Soproni B. Over a year ago

whats the difference between your answer and the first answer?

Isaac Li Over a year ago

Thanks, now window come up, but content is " html to write...{{x.detail}}", it seems the value of x.detail is not input correctly?

whatoncewaslost · Accepted Answer · 2015-08-25 03:22:29Z

0

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.

edited Aug 25, 2015 at 3:22

answered Aug 25, 2015 at 3:10

whatoncewaslost

2,2562 gold badges20 silver badges26 bronze badges

3 Comments

Isaac Li Over a year ago

Thanks @OceansOnPluto, when I tried the first way, window didn't come up; when I tried second way, window come up but the content is "html to write...{{x.detail}}", it seems the value of x.detail is not input correctly.

whatoncewaslost Over a year ago

Ah, you know what? Remove the quotes. So it should be viewOrderDetails({{x.detail}}). I'll edit the answer. That should work.

Isaac Li Over a year ago

Thanks @OceansOnPluto, the first way works for me now!

Collectives™ on Stack Overflow

"x is not defined" when call a javascript function

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related