javascript - 根据其他事件更改 ng-click 的功能？

Question

我有一个问题，我正在尝试做的是:

我有这个按钮，如果用户取消订阅，他可以点击按钮进行订阅。现在的问题是，如果用户订阅了我希望他点击按钮取消订阅。

<button class="btn btn-primary subscribe-btn" ng-click="subscribe()" >
    Subscribe
</button>

我怎样才能在 angularJS 中做到这一点？根据用户的状态(例如:isSubscribed=true)更改按钮的功能、外观以及调用的功能。

Answer 1

试试这个:

<button class="btn btn-primary subscribe-btn" ng-click="isSubscribed ? unsubscribe() : subscribe()" >
    <span ng-show="isSubscribed">Subscribe</span><span ng-hide="isSubscribed">Unubscribe</span>
</button>

这将调用正确的函数，并显示正确的文本，具体取决于 isSubscribed。

然而，一个更简洁的选择是在 Controller 中处理它，从而产生类似这样的 HTML:

<button class="btn btn-primary subscribe-btn"
        ng-controller="ButtonController"
        ng-click="toggleSubscribe()" >
    {{subscribeButton}}
</button>

只需根据用户是否订阅来设置按钮的文本:

app.controller('ButtonController', ['$scope', function($scope) {
    $scope.subscribed = false;
    $scope.subscribeButton = $scope.subscribed ? 'Unsubscribe' : 'Subscribe';
    $scope.toggleSubscribe= function() {
        $scope.subscribed = !$scope.subscribed; // Handle subscription...
    };
}]);

现在，更好的方法是通过创建 custom element directive 来使用模板:

app.directive('subscribeButton', function() {
    return {
        templateUrl: 'subscribe-button.html'
    };
});