使用嵌套视图时如何在顶级容器上使用 ng-class

Question

我正在尝试导入 toggleable sidebar 并尝试使用嵌套视图，以便我可以单独动态更改每个部分的内容。我的应用有 3 个主要组件

1) 侧边栏 2) header 3) 一个内容区

我遇到的问题是，在原始项目中，所有内容都在一个控制器中，并且有一个 ng-class 可以切换边栏，可以在单击时切换，但我无法在我的应用程序。

这是我的 index.html 代码目前的样子

<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
    <div id="sidebar-wrapper" ui-view="sidebar">
    </div>
    <div id="content-wrapper">
        <div class="page-content">
                <!-- Header Bar -->
                <div class="row header" ui-view="header">
                </div>
                <!-- Header Bar -->
                <div ui-view="content" ></div>
        </div>
    </div>
</div>

还有我的路线配置。

.state('home', {
              url: '/',
            views: {
                'content': {
                        templateUrl: 'home.html',
                        controller: 'HomeCtrl as home'
                      },
                'sidebar': {
                        controller: 'SidebarCtrl as sidebar',
                          templateUrl: 'sidebar.html'
                      },
                'header': {
                            controller: 'HeaderCtrl as header',
                            templateUrl: 'header.html'
                    }
            }

          });

我对如何使用 ng-class 切换侧边栏感到困惑，因为我无法将它放在任何其他模板中以使其工作。

Answer 1

我以前的评论作为回答：

在你的 html:

<div id="page-wrapper" ng-controller="myctrl" ng-class="{'open': toggle}" ng-cloak>
  ...
</div>

在您的脚本文件中：

.controller('myctrl',[ '$scope', function($scope){
  $scope.toggle = true;  // open initially
}]);

使用嵌套视图时如何在顶级容器上使用 ng-class

How to use ng-class on a top level container when using nested views

views

angularjs