javascript - ng-show 不适用于 Angular 项目

Question

如果满足条件，我试图隐藏按钮。使用 ng-show 这应该非常容易，但由于某种原因，我在实现这一点时遇到了困难。

我的代码如下:

html

<a href = "example.com" ng-click="Bookings.disableCancelFirstBooking(car)">
     <i class="red" ng-show="Bookings.disableCancellationButton">
     </i>
</a>

Controller .js

this.disableCancellationButton = true;

this.disableCancelFirstBooking = function(carID){

 BookingsResource.firstBookingOfSubscription({id: carID},  $.proxy(function () {
       if(carID.status === 'waiting'){                    
            this.disableCancellationButton = false;
            console.log(this.disableCancellationButton)
            console.log('why does this not work?')
        }
    }));
}

最后是我正在实现的服务

  firstBookingOfSubscription: {
                    method: "GET",
                    url: 'example/bookings/:id/cars',
                    isArray: true
                }

奇怪的是，我在控制台中看到消息“为什么这不起作用？”以及this.disableCancellationButton = false;

有什么想法为什么图标没有被隐藏吗？

我已经阅读了很多 SO 帖子，但找不到相关答案

Answer 1

在回调内部 this 已经改变了范围(ES6 => 的优点之一是 this 在那里为您处理) 。试试这个(没有双关语):

var self = this
this.disableCancellationButton = true;

this.disableCancelFirstBooking = function(carID){

 BookingsResource.firstBookingOfSubscription({id: carID},  $.proxy(function () {
       if(carID.status === 'waiting'){                    
            self.disableCancellationButton = false;
            //^^
            console.log(this.disableCancellationButton)
            console.log('why does this not work?')
        }
    }));
}