Question

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

1）侧边栏 2）标题 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

1 个答案: