單擊按鈕時更改角度指令

Question

我這里有一個帶有指令profile-unlink的按鈕html。 我想在單擊按鈕后更改設置為profile-link的指令。 在角度js中這是可能的嗎？

haml代碼：

從：

%button.unlink{"ff-profile-unlink" => "true"} Unlink Facebook

至：

%button.unlink{"ff-profile-link" => "true"} Link Facebook

Answer 1

第一個評論是正確的，只需要做一個功能，做兩件事。

%button.unlink{"ff-profile-linked-setter" => "true"}

%button.unlink{"ff-profile-linked-setter" => "false"}

Answer 2

一種方法是使用ng-show和ng-hide ，根據應用程序狀態顯示兩個按鈕並顯示/隱藏它們。 Foer示例：

%button.unlink{"ff-profile-unlink" => "true", "ng-show" => "linked_to_facebook", "ng-click" => "unlink_facebook"} Unlink Facebook
%button.unlink{"ff-profile-link" => "true", "ng-hide" => "linked_to_facebook", "ng-click"="link_facebook"} Link Facebook

接着

function SomeCtrl ($scope) {
  $scope.link_facebook: function() { $scope.linked_to_facebook = true},
  $scope.unlink_facebook: function() { $scope.linked_to_facebook = false},
}

另一種方法是使用CSS來實現相同的結果。 這里的邏輯是有兩個按鈕，每次使用CSS隱藏/顯示一個。 這是一個例子：

%div#links
    %button.unlink{"ff-profile-unlink" => "true"} Unlink Facebook
    %button.link{"ff-profile-link" => "true"} Link Facebook

在你的SASS：

.linked_to_facebook {
    .link { display: hidden}
    .unlink {display: block}
}
.unlinked_from_facebook {
    .link { display: block}
    .unlink {display: hidden}
}

那么你可以使用addClass與removeClass添加和刪除linked_to_facebook和unlinked_from_facebook到#links股利。

PS：上面的代碼可以改進。 這只是為了表明這一點。