根据其他事件更改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.

但是,更清晰的选择是在控制器中处理这个,导致像这样的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...
    };
}]);

现在,更好的方法是通过创建自定义元素指令来使用模板:

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