Question

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

所以结构看起来像这样，

application.html.haml
- {“ui-view”=＆gt; “首页”}
  - ％a {“ui-sref”=＆gt; “.suggestions”，“ng-click”=＆gt; “模糊（）”}

因此应用程序有一个带有view属性的div元素，它在此视图中加载首页模板，在此模板中是一个调用suggestions状态的按钮。

因此，当单击此按钮时，我想在application.html.haml中向一个元素添加一个类，但我无法使其工作。

在我的建议控制器中，我有，

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

在application.html.haml我有

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

但是当我点击链接时，身体不会改变。但是我将{"ng-class" => "blur"}放在模板中，当输入suggestions状态时它会加载它。

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

所以解决方案可能是将建议控制器添加到body元素，但这看起来有点脏。我希望有一种方法可以在某种程度上找到控制器外的"ng-class"元素。

Answer 1

在完成15分钟的研究后，总能很好地找到问题的答案。

通过将"ng-class"更改为此功能，

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

Answer 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。

查找根ng-class元素

2 个答案: