Question

与AngularJS挣扎，任何帮助都会受到赞赏。问题是 - 我在div上有一个按钮，点击它时应该为应用程序的整个主体添加一个css类。可能吗？谷歌搜索建议我们可以将css类添加到相关元素。

详细说明：

我有一个显示表单的主页面。它有一个图标列表，点击它们会显示一个页面，显示项目的详细信息，它应该将我的主页面向左移动，以便为详细信息页面腾出空间。

    <ul data-ng-controller="myctrl">
       <li data-ng-click="showMe(0)">Item 1</li>
       <li data-ng-click="showMe(1)">Item 2</li>
       <span data-ng-include="template.url"></span>
   </ul>

   var myapp = angular.module("MyApp",[]);
   myapp.controller('myctrl', ['$scope','$element',function($scope,$element){
       $scope.templates = [ {name: "item1", url: "item1.html"},
                            {name: "item2", url: "item2.html"}];
       $scope.showMe = function(index) {
          $scope.template = $scope.templates[index];
          $element('body').addClass("shiftToLeft"); //does not seem to have an effect!
       }
   }]);

谢谢和问候！

Answer 1

Angular提供了有条件或动态地完成CSS样式的指令：

例如：

ngStyle指令允许您有条件地在HTML元素上设置CSS样式。 http://docs.angularjs.org/api/ng.directive:ngStyle

使用ng-class动态更改BODY标记的类 http://docs.angularjs.org/api/ng.directive:ngClass

Answer 2

我遇到了同样的问题，我所做的是在主体上添加指令ng-class="currentPageName"并使用rootsScope更改此变量：$rootScope.currentPageName = "name_of_the_class"。

因此您需要为每个控制器更改它。

发生单击时向主体添加css类

2 个答案: