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

Question

向AngularJS再次向大家寻求帮助.我正在构建一个SPA,其中我的布局(主)页面被划分为三个部分左侧导航栏,中心内容,右侧项目列表栏.我加载主页时应隐藏正确的项目列表,但应在剩余的屏幕中显示.我在homeController中创建了一个$ rootScope变量,并根据位置路径将值设置为'true',并在模板中使用该变量将值设置为ngHide.当我使用SPA导航到另一个页面时,我的右侧和左侧栏不会再次加载,只有我的中心内容会执行新视图.在将数据发送到新视图模板的控制器中加载新视图时,我将我在homeController中创建的$ rootScope变量重置为' 假',但我的右栏仍然不可见.虽然interpollat​​ion已将值更新为'true',但我可以看到ng-hidden类仍在使用.任何建议都将受到高度赞赏.

布局页面标记:

<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

关于角度的两件事你需要知道才能使你呈现的代码有效:

• 您不需要使用{{}}ng指令插入值,而是使用ng-hide="showCart".

• 假设所有控制器都在同一个角度应用程序中,同一应用程序中的所有作用域都从同一个根继承,即在$ rootScope上定义的任何作用域都可用于所有子作用域.要从应用程序的任何视图中访问$ rootScope.x,您只需:{{x}}或者在您的情况下,您在指令中使用它可以执行以下操作:

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

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