查找根 ng-class 元素答案

【问题标题】：Find root ng-class element查找根 ng-class 元素
【发布时间】：2016-01-22 19:48:24
【问题描述】：

我有一个应用程序，其中有一个名为suggestions 的状态。当我单击从当前状态转换到suggestions 状态的按钮时，我想向application.html.haml 文件（根）中的元素添加一个css 类。

所以结构看起来像这样，

application.html.haml
- {"ui-view" => "首页"}
  - %a{"ui-sref" => ".suggestions", "ng-click" => "blur()"}

所以应用程序有一个带有view 属性的div 元素，它在这个视图中加载首页模板，在这个模板中是一个调用suggestionsstate 的按钮。

因此，当单击此按钮时，我想将一个类添加到 application.html.haml 中的元素，但我无法让它工作。

在我的建议控制器中，

$scope.contentBlur = function(){
  $scope.blur = 'blur';
}

在application.html.haml我有

%body{"ng-class" => "blur"}

但是当我点击链接时，正文并没有改变。但是，我将{"ng-class" => "blur"} 放在进入suggestions 状态时加载的模板中，它确实有效。

所以这可能是因为%body 元素没有连接到建议控制器（因为建议模板是，然后它工作）。

所以一个解决方案可能是将建议控制器添加到 body 元素，但这似乎有点脏。我希望有办法以某种方式在控制器之外找到"ng-class" 元素。

【问题讨论】：

标签： angularjs

【解决方案1】：

在您完成 15 分钟的研究后找到问题的答案总是很高兴。

通过将 "ng-class" 更改为此它可以工作，

{"ng-class" => "{ 'blur': $root.blur=='blur' }"}

【讨论】：

【解决方案2】：

假设您使用ui-router，如果您想根据当前状态为body元素分配一个类，请考虑使用$state.includes方法。

示例（在 HTML 中）：

<body ng-controller="BodyController as body" ng-class="{blur: body.state.includes('suggestions')">

...在你的BodyController:

angular.module('myApp)
  .controller('BodyController', BodyController);

function BodyController($state) {
  var body = this;
  this.state = $state;
}

$state.includes 方法也会检测您是否处于suggestions 的子状态，这可能很有用。如果不需要，请改用$state.is。

【讨论】：