css - 单击发生时向正文添加一个 css 类

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