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
                }

奇怪的是，我在控制台中看到消息 'why does this not work?' 以及 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?')
        }
    }));
}

Answer 2

为什么不对 disableCancellationButton 变量使用 $scope。我认为您的变量已更新但未传输到视图。

ng-show 在 angular 项目中不工作

ng-show not working in angular project

javascript

angularjs

ng-show