Javascript AngularJS-切换视图_Javascript_Angularjs

Javascript AngularJS-切换视图

javascript angularjs

Javascript AngularJS-切换视图,javascript,angularjs,Javascript,Angularjs,我有下面的控制器函数，它返回一个布尔值当前HTML： <a href="#" ng-click="collapseNavbar(true)" ng-model="collNavbar"> <i class="fa fa-arrow-right"></i> </a> 布局控制器： App.controller('layoutController', ['$scope', function($scope) { $scope.c

我有下面的控制器函数，它返回一个布尔值

当前HTML：

<a href="#" ng-click="collapseNavbar(true)" ng-model="collNavbar">
    <i class="fa fa-arrow-right"></i>
</a>

布局控制器：

App.controller('layoutController', ['$scope', function($scope) { $scope.collapseNavbar = function(val) { return $scope.value = !val; } }]) App.controller（'layoutController'，['$scope'，函数（$scope）{ $scope.collapseNavbar=函数（val）{ 返回$scope.value=！val； } }]) 基于该值，我需要为

标记指定一个类，如yes或no

早些时候我用这样的东西来做

HTML:

<div class="toggle-sidebar navbar-nav">
     <ul class="nav navbar-nav">
        <li>
            <a href="#" ng-click="isActive = !isActive" ng-model="collNavbar">
                <i class="fa fa-arrow-right"></i>
            </a>
        </li>
    </ul>
</div>

HTML2

<body ng-class="{'yes': isActive, 'no': !isActive}" ng-controller="layoutController">

但是我不希望我的代码出现在HTML文件中。相反，我为它创建了一个名为

layoutController.js的控制器，上面是它使用的代码
我能够将布尔值作为类传递给pageload上的body
标记
但是我不知道如何在单击a
标记时传递它，因为我使用ng click传递了函数
任何关于我如何做的建议都会对我的学习很有帮助
提前感谢。
试试这个：
<body ng-controller="layoutController" ng-app="App" 
                ng-class="getClass(value)">
   <a href="#" ng-click="collapseNavbar(!value)" ng-model="collNavbar">
        <i class="fa fa-arrow-right"></i>
    </a>
 </body>

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式，在HTML元素上动态设置CSS类
设置表达式的方法之一是返回表示CSS类的字符串（或空格分隔的字符串）
 HTML
  <body ng-class="{'yes': isActive, 'no': !isActive}" ng-controller="layoutController">

    <div class="toggle-sidebar navbar-nav">
         <ul class="nav navbar-nav">
            <li>
                <a href="#" ng-click="collapseNavbar()" ng-model="collNavbar">
                    <i class="fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </div>

    </body>

  <body class="{{className}}" ng-controller="layoutController">

    <div class="toggle-sidebar navbar-nav">
         <ul class="nav navbar-nav">
            <li>
                <a href="#" ng-click="collapseNavbar()" >
                    <i class="fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </div>

    </body>

或
HTML
  <body class="{{className}}" ng-controller="layoutController">

    <div class="toggle-sidebar navbar-nav">
         <ul class="nav navbar-nav">
            <li>
                <a href="#" ng-click="collapseNavbar()" >
                    <i class="fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </div>

    </body>

如何访问body标记中的$scope.value以将类指定为yes或no？yes=true，no=false。将ng controller=“layoutController”放在body标记上。是否要将ng类作为条件属性？我不想在body标记上写入ng类
，然后显示它并使用单独的控制器文件。如果我必须按照你给出的方式使用它，我可以简单地在锚定标记上设置它，`ng click=“isActive=！isActive”，这将返回一个布尔值。我只想简单地使用HTML并删除HTML文件中的角度表达式。我只想在函数中返回类名，并在body标记中以类的形式返回该函数的值。$scope.value在您的代码中始终为false。谢谢，这太短太好了。但如果你不介意，一定要告诉我。遵循这种做法是好是坏，而不是直接在HTML标记上使用角度表达式+1最佳实践是始终使用角度指令，如ng类。我们可以从控制器控制值。
  <body class="{{className}}" ng-controller="layoutController">

    <div class="toggle-sidebar navbar-nav">
         <ul class="nav navbar-nav">
            <li>
                <a href="#" ng-click="collapseNavbar()" >
                    <i class="fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </div>

    </body>

App.controller('layoutController', ['$scope', function($scope) {

    $scope.collapseNavbar = function() {

        if($scope.isActive)
           $scope.className='yes';
        else
          $scope.className='no';
        $scope.isActive = !$scope.isActive;

    }

}]);