单击按钮时更改角度指令

debugcn 发表于 Dev

詹菲拉里斯

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

haml中的代码：

从：

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

到：

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

奥米德·卡曼加（Omid Kamangar）

一种实现方法是拥有两个按钮，并使用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_facebookandunlinked_from_facebook到#linksdiv。

PS：上面的代码可以改进。只是为了说明这一点。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。