javascript - 每当单击按钮时更改 Angular Directive(指令)

Question

我这里有一个带有指令profile-unlink的按钮html。我想更改单击按钮后设置到 profile-link 中的指令。这在 Angular js 中可能吗？

haml 中的代码:

来自:

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

致:

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

Answer 1

实现此目的的一种方法是使用两个按钮，并使用 ng-show 和 ng-hide 根据应用程序状态显示/隐藏它们。例如:

%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 div。

P.S: 上面的代码可以改进。只是为了表明这一点。