获取 ng-show 值作为参考

Getting ng-show value as reference

本文关键字：参考 ng-show 获取      更新时间：2023-09-26

我有以下html：

<div ng-show=showMarketingNav>
    ...
</div>
<div ng-show=showProductsNav>
    ...
</div>
<div ng-show=showSettingsNav>
    ...
</div>

我想做的是轻松地从另一个控制器中隐藏除一个div 之外的所有div。我想我可以很聪明，做以下几点：

var subNavMenuDisplays = {
    Marketing: $scope.showMarketingNav,
    Products: $scope.showProductsNav,
    Settings: $scope.showSettingsNav
}
$rootScope.hideContextMenu = function () {
    for (var category in subNavMenuDisplays) {
        subNavMenuDisplays[category] = false;
    }
}
$rootScope.setContextMenu = function (name) {
    $rootScope.hideContextMenu();
    subNavMenuDisplays[name] = true;
}

但这显然不起作用，因为$scope.showMarketingNav等将作为值传递，而不是引用。

以下有效，但不太好使用：

$rootScope.hideContextMenu = function () {
    $scope.showMarketingNav = false;
    $scope.showProductsNav = false;
    $scope.showSettingsNav = false;
}
$rootScope.setContextMenu = function (name) {
    $rootScope.hideContextMenu();
    if (name == "Marketing") {
        $scope.showMarketingNav = true;
    }
    if (name == "Products") {
        $scope.showProductsNav = true;
    }
    if (name == "Settings") {
        $scope.showSettingsNav = true;
    }
}

有没有办法通过引用来获取$scope.showMarketingNav，或者另一种聪明的方法？

我宁愿不使用 eval 来连接变量名称。

您可以将对象放在$scope上，然后动态切换它：

$scope.show = {};
$rootScope.setContextMenu = function (name) {
    $scope.show = {};
    $scope.show[name] = true;
}

和 html：

<div ng-show="show.Marketing">
    ...
</div>
<div ng-show="show.Products">
    ...
</div>
<div ng-show="show.Settings">
    ...
</div>

这是一个演示更改的 plunker。

您可以在该对象中分配简单的更新程序函数：

Marketing: function(val) { $scope.showMarketingNav = val },
Products: function(val) { $scope.showProductsNav = val}, 
Settings: function(val) { $scope.showSettingsNav = val}

然后称之为： 

subNavMenuDisplays[name](true);
相关文章：