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

这是控制器中的功能：

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

当用户点击＆＃34;我的帐户＆＃34;时，如何更改$scope.activeMenu和$scope.activeLink在布局上？控制台打印＆＃34;设置＆＃34;对于$scope.activeMenu来说，这意味着它在函数中，但没有任何事情发生。。。也许是因为我把$scope.activeMenu放在一个函数中？

Answer 1

您是否尝试停止事件传播？如果它不以这种方式工作，请尝试将其添加到子元素。

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

Answer 2

在你的plnkr中，缺少主动链接的css，我在一个函数中包含了所点击链接的分配。

检查this已更新的plnkr。

该功能非常基本：

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

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

如果您想在点击“＃”时删除绿色，请联系＆＃39;或者＆＃39;关于＆＃39;，你可以将它们包装在一个函数中，看起来像：

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

    $scope.activeMenu = menu;
}

<强>更新

我终于理解了你的意思，我认为..点击链接可以更改视图，从而重新实例化你的控制器。这就是activeMenu为空的原因。如果您创建服务并将当前活动的菜单存储在那里，则它不会为空。

我已更新plnkr以包含服务。我无法完全测试它，因为我还没有获得您的整个项目代码，但以此作为指导，您应该能够让它工作！

如何在布局中添加ng-click类？

2 个答案: