Change the function of an ng-click based on other events?

Question

I have a problem, what I am trying to do is:

I have this button, if the user is unsubscribed, he can click the button to get subscribed. Now the thing is, if the user is subscribed I want him to click the button to get unsubscribed.

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

How can I do this in angularJS? Based on the state of the user (eg: isSubscribed=true) change what the button does, how it looks and what function does it call..

Answer 1

Try this:

<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>

This will call the correct function, and display the correct text, depending on isSubscribed.

However, a cleaner option would be to handle this in the controller, resulting in something like this HTML:

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

Just set the button's text depending on whether or not the user is subscribed:

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

Now, even better would be to use a template by creating a custom element directive:

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

Answer 2

for button you could have :

<button ng-init="subscribed = true" class="btn btn-primary subscribe-btn" ng-click="changeSubscription()" >
    {{button}}
</button>

And in your app.controller you could have

$scope.changeSubscription() = function(){
    if($scope.subscribed){
        $scope.button = "subscribe";
        $scope.subscribe = false;
        unsubscribe();
    }else{
        $scope.button = "unsubscribe";
        $scope.subscribe = true;
        subscribe();
    }
}