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

Angularjs 在单页应用程序中使用$rootScope的ngHide/ngShow,angularjs,location,rootscope,ng-hide,Angularjs,Location,Rootscope,Ng Hide,再次为AngularJS向你们寻求帮助。我正在构建一个SPA,其中我的布局(母版)页面分为三个部分:左侧导航栏、中心内容栏和右侧项目列表栏。当我加载我的主页时,我的右侧项目列表应该隐藏,但应该在其余屏幕中可见。我在homeController中创建了一个$rootScope变量,并根据位置路径将该值设置为“true”,然后在模板中使用该变量将该值设置为ngHide。当我使用SPA导航到另一个页面时,我的右栏和左栏不会再次加载,只有我的中心内容会加载,这是一个新视图。在将数据发送到新视图模板的控制

再次为AngularJS向你们寻求帮助。我正在构建一个SPA,其中我的布局(母版)页面分为三个部分:左侧导航栏、中心内容栏和右侧项目列表栏。当我加载我的主页时,我的右侧项目列表应该隐藏,但应该在其余屏幕中可见。我在homeController中创建了一个$rootScope变量,并根据位置路径将该值设置为“true”,然后在模板中使用该变量将该值设置为ngHide。当我使用SPA导航到另一个页面时,我的右栏和左栏不会再次加载,只有我的中心内容会加载,这是一个新视图。在将数据发送到新视图模板的控制器中加载新视图时,我将在homeController中创建的$rootScope变量重置为“false”,但我的右栏仍然不可见。我可以看到ng hidden类仍然处于启用状态,尽管插入已将值更新为“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>  
类别控制器代码:这是我重置$rootScope变量值的地方

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

关于angular,您需要知道两件事,才能使您的代码正常工作:

  • 您不需要在ng指令中使用
    {{}
    插值,而是使用
    ng hide=“showCart”

  • 假设所有控制器都在同一角度应用程序中, 同一应用程序中的所有作用域都从同一根继承, i、 e您在$rootScope上定义的任何内容都将提供给所有用户 子范围。要从应用程序中的任何视图中访问$rootScope.x,您只需执行以下操作:{{x}}或者在指令中使用它,您可以执行以下操作:

    这将查找您当前的作用域,如果它有一个showCart,那么它将使用它,否则它将获取$rootScope.showCart

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