更改基于其他事件的ng-click功能吗？

我有这个按钮，如果用户取消订阅，他可以点击按钮来订阅。现在的事情是，如果用户订阅，我希望他点击按钮来取消订阅。

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

我如何在angularJS中做到这一点？根据用户的状态（例如：isSubscribed = TRUE）改变按钮的功能，它的外观和它调用什么功能..

来源

2014-07-22 Rus Paul

更好的解决方案真的会在你的控制器中设置的状态和调用的方法管理这个逻辑改为点击按钮！ – TheRodeo

试试这个：

<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... 
    }; 
}]);

现在，更妙的是通过创建一个custom element directive使用模板：

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

来源

2014-07-22 08:39:53 Cerbrus

谢谢，这就像一个魅力。最终我制定了一个解决方案，但你的只是更清洁。 *注意：将第一个例子中的第二个ng-show更改为ng-hide * –

的按钮，你可以有：

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

来源

2014-07-22 08:49:39 Lrrr

更改基于其他事件的ng-click功能吗？

回答

相关问题