请根据其他事件修改ng-click的功能

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

本文关键字：ng-click 功能 修改 事件 其他      更新时间：2023-09-26

我有一个问题，我想做的是:

我有这个按钮，如果用户取消订阅，他可以点击按钮获得订阅。如果用户订阅了，我希望他点击按钮取消订阅。

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

我如何在angularJS中做到这一点?根据用户的状态(例如:issubscriptions =true)改变按钮的功能，它的外观和它调用的函数。

试试这个:

<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'
    };
});

for button: 

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

在app。controller中你可以输入

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