每当单击按钮时更改角度指令答案

【问题标题】：Change angular directive whenever a button is clicked每当单击按钮时更改角度指令
【发布时间】：2014-03-30 09:13:21
【问题描述】：

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

haml 中的代码：

发件人：

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

收件人：

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

【问题讨论】：

除了改变指令，你能改变指令范围内的一个变量吗？

标签： javascript angularjs haml

【解决方案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：上面的代码可以改进。只是为了说明问题。

【讨论】：

像魅力一样工作。谢谢！使用您的 CSS 方法。呵呵

【解决方案2】：

第一条评论是正确的，只需要做一个做两件事的函数。

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

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

【讨论】：