ngHide/ngShow 在单页应用程序中使用 $rootScope

Question

再次向大家寻求帮助 AngularJS。我正在构建一个 SPA，其中我的布局（主）页面分为三个部分左侧导航栏、中心内容、右侧项目列表栏。当我加载我的主页时，我的右侧项目列表应该被隐藏，但在其余屏幕中应该是可见的。我在 homeController 中创建了一个 $rootScope 变量，并根据位置路径将值设置为 'true'，并在模板中使用该变量将值设置为 ngHide。当我在使用 SPA 时导航到不同的页面时，我的左右栏不会再次加载，只有我的中心内容会加载，这是一个新视图。在将数据发送到新视图模板的控制器中加载新视图时，我正在将我在 homeController 中创建的 $rootScope 变量重置为 'false'，但我的右侧栏仍然不可见。我可以看到 ng-hidden class 仍然存在，尽管插值已将值更新为 'true'。任何建议将不胜感激。

来自布局页面的标记：

<aside class="right_bar" ng-hide="{{$root.show}}">
        <div class="my-list"><span class="f3">My Cart</span><div class=""><span class="list-count">0</span></div></div><div class="list-item"><ul></ul></div>
    </aside>

homeController 代码：

    function getHomeConfigsCtrl($http, $location, $rootScope) {

     $rootScope.show = false;

    var loc = $location.path();

    if (loc === '/Home/Index' || loc ==='')
    {
        $rootScope.show = true;
    }
   }

类别控制器代码：这是我重置 $rootScope 变量值的地方

function getAllCategoryDetails($routeParams,$rootScope) {
    $rootScope.show = false;
}

Answer 1

关于 angular 您需要知道的两件事才能使您提供的代码有效：

您不需要在 ng 指令中使用 {{}} 插入值，而是使用 ng-hide="showCart".
假设您所有的控制器都在同一个 angular 应用程序中，同一应用程序中的所有范围都继承自同一根，即你在 $rootScope 上定义的任何内容都将对所有人可用子范围。要从应用程序的任何视图中访问 $rootScope.x，您所要做的就是：{{x}} 或者在您的情况下，您在指令中使用它，您可以执行如下操作：

<aside class="right_bar" ng-hide="showCart">

这将查找您当前的范围，如果它有 showCart 则它将使用它，否则它将获取 $rootScope.showCart

ngHide/ngShow 在单页应用程序中使用 $rootScope

ngHide/ngShow using $rootScope in Single Page Application

location

angularjs

rootscope

ng-hide