Thay đổi chức năng của ng-click dựa trên các sự kiện khác?

Question

Tôi gặp sự cố, những gì tôi đang cố gắng làm là:

Tôi có nút này, nếu người dùng bị hủy đăng ký, anh ấy có thể nhấp vào nút để đăng ký. Bây giờ vấn đề là, nếu người dùng được đăng ký, tôi muốn anh ta nhấp vào nút để hủy đăng ký.

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

Tôi có thể làm điều này trong angularJS như thế nào? Dựa trên tình trạng của người sử dụng (ví dụ: isSubscribed = true) thay đổi chức năng của nút thực hiện, nó trông như thế và những gì chức năng nó gọi ..

Answer 1

Hãy thử điều này:

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

này sẽ gọi cho đúng và hiển thị văn bản chính xác, tùy thuộc vào isSubscribed.

Tuy nhiên, một lựa chọn sạch hơn sẽ được xử lý này trong bộ điều khiển, dẫn đến một cái gì đó giống như HTML này:

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

Chỉ cần thiết lập văn bản của nút tuỳ thuộc vào việc hay không người dùng sẽ được đăng ký:

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

Bây giờ, thậm chí tốt hơn là nên sử dụng một mẫu bằng cách tạo ra một custom element directive:

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

Answer 2

cho nút bạn có thể có:

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

Và trong app.controller của bạn, bạn có thể có

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