angularjs - "x is not defined" when call a javascript function -

i have code 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 write...');             newwin.document.write(detail);         } 

i want x.detail input parameter window.vieworderdetails.

but when click button "order detail", it's said "x not defined". want know problem is. thanks.

it's little hard tell i'm guessing problem here x isn't being parsed because onclick vanilla javascript expression, not angular expression. what's difference?

something have pure javascript, while angular has it's own language (that's very, close javascript) uses in it's directive expressions. x means angular, not regular javascript. how fix this? in 2 ways.

the first can change button element add ng-click. so.

    <button ng-click="vieworderdetails(x.detail)">order detail</button> 

and add method controller following.

    $scope.vieworderdetails = function vieworderdetails(detail) {         var newwin = open('orderdetails.html','windowname','height=300,width=300');         newwin.document.write('html write...');         newwin.document.write(detail);     } 

so now, since angular sees has ng-click directive, it'll know parse x 1 of current objects in array you're iterating through.

as others have said, can use this.

<button onclick="window.vieworderdetails({{x.detail}})">order detail</button> 

which valid, think if you're going build app in angular, should put vieworderdetails in controller , make part of angular. it's better organization.

but way works {{ }} tell angular interpolate , parse whatever in them. while angular isn't evaluating whole javascript expression on click, knows go ahead , replace x in {{}} correct object because it'll try parse whatever sees in braces.