angularjs - 如何从布局中的 ng-click 添加类？

Question

这是页面布局:

<li class="dropdown">
    <ul class="submenu">
        <li ng-click="SetActiveMenuForPersonalInfo();">
            <a href="../Account/#/PersonalInfo">@Translate("MY_ACCOUNT")<a>
        </li>
    </ul>
</li>

当用户点击我的帐户时，他们会看到:http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview

这是 Controller 中的函数:

$scope.SetActiveMenuForPersonalInfo = function () {
    $scope.activeMenu = 'Settings';
    $scope.activeLink = "PersonalInfo";
    console.log("Active menu: ",$scope.activeMenu);
}

当用户单击布局上的“我的帐户”时，如何更改 $scope.activeMenu 和 $scope.activeLink？控制台为 $scope.activeMenu 打印“Settings”，这意味着它在运行，但什么也没有发生。 . .可能是因为我把 $scope.activeMenu 放在函数里了？

Answer 1

在你的 plnkr 中，事件链接的 css 丢失了，我将点击链接的分配包装在一个函数中。

检查 this更新了 plnkr。

这个函数非常基础:

$scope.changeActiveLink = function(link) {
    $scope.activeLink = link;
}

现在点击时链接是绿色的。这就是你想要的吧？好吧，也许颜色不同，但原理是一样的。

如果你想在点击“联系人”或“关于”时移除绿色，你也可以将它们包装在一个函数中，如下所示:

$scope.changeActiveMenu = function(menu) {
    if($scope.activeMenu == 'Settings' && menu != 'Settings') {
        $scope.activeLink = '';
    }

    $scope.activeMenu = menu;
}

更新

我终于明白你的意思了，我想。通过点击你改变 View 的链接，从而重新实例化你的 Controller 。这就是 activeMenu 为空的原因。如果您创建服务并将当前事件的菜单存储在其中，则它不会为空。

我已经更新了 plnkr 以包含一项服务。我无法完全测试它，因为我还没有您的整个项目代码，但以此为指导，您应该能够让它发挥作用!