选择另一个元素时（通过Angular）将类应用于一个元素的最佳方法？答案

【问题标题】：Best way to apply a class to one element when another is selected (via Angular)?选择另一个元素时（通过Angular）将类应用于一个元素的最佳方法？
【发布时间】：2014-01-14 19:50:50
【问题描述】：

我在 Bootstrap 中有一个很长的表单，标签在一列中，输入在右侧的另一列中。为了帮助用户了解他正在编辑哪个字段，我想在关注相应输入时更改标签的颜色，然后在模糊时将颜色更改回默认值。我可以在 jQuery 中轻松地做到这一点，但由于 jQuery 和 Angular 之间有很多重叠，我宁愿不包括两者。也就是说，我对 Angular 还是很陌生，所以任何帮助都将不胜感激。谢谢！

编辑：澄清一下，我正在尝试更改标签上的类，而不是输入本身，因此纯 CSS 解决方案不适用于此处。

【问题讨论】：

你可以使用 ng-focus 和 ng-blur 指令。
对，但我正在尝试更改另一个 div 中包含的标签的 CSS 类，而不是关注的输入。
Angular 不是 DOM 操作库，因为它们在文档中明确声明。如果您需要 DOM 操作（听起来像您这样做），您应该咬紧牙关并包含 jQuery。或者您可以尝试一些香草 javascript（首选，因为您只实现您需要的，而不是用巡航导弹点燃香烟）
"Angular 不是一个 DOM 操作库，因为它们在文档中明确声明。"你能告诉我它在文档中的什么地方吗？如果不是用于 DOM 操作，我不确定双向数据绑定和指令（如 ng-class）的意义何在。
抱歉，我说错了——它是，但它不是 jQuery。在第一个 Common Pitfall docs.angularjs.org/misc/faq 下查找您正在寻找 ng-class 指令

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

您将 css 设置为焦点。就这么简单。没有 jQuery，没有 AngularJS

input:focus
{
  background-color:yellow;
}

http://plnkr.co/edit/czAmSlOvd1ZYJLoVK5h7?p=preview

------------ 编辑 ------------------
由于海报要求突出显示标签，而不是输入。我使用 angularJS 指令提供了另一个答案

HTML 看起来像这样

  <label for="firstname">First name:</label>
  <input id="firstname" hilight-label />

这是指令。它监听事件 focus 和 blur 并设置/取消设置突出显示类

  var app= angular.module('myApp',[]);
  app.directive('hilightLabel', function() {
    return {
      link: function(scope, el, attr) {
        var hilightClass = (attr.hightLabel || 'hilight');
        var label = document.querySelector("label[for="+el[0].id+"]");
        el[0].addEventListener('focus', function(){
          label.className += (" " + hilightClass);
        });
        el[0].addEventListener('blur', function(){
          var regEx = new RegExp('\\b' + hilightClass+ '\\b');
          label.className = label.className.replace(regEx,'');
        })
      }
    }
  })

演示：http://plnkr.co/edit/czAmSlOvd1ZYJLoVK5h7?p=preview

【讨论】：

这仅在我尝试更改输入字段本身的 CSS 或包含在输入字段内的标签时才有效，这两种情况均不适用。
提供了另一种使用 AngularJS 指令进行编辑的解决方案
这正是我想要的。谢谢！

【解决方案2】：

这是迄今为止我想出的最佳解决方案：

<div class="col-sm-3">
    <label for="name" ng-class="{highlight: $scope.highlightName}">Name:</label>
</div>
<div class="col-sm-3">
    <input id="name" ng-focus="$scope.highlightName = true" ng-blur="$scope.highlightName = false" />
</div>

它有效，但我觉得应该有一个更简洁的方法来解决这个问题，所以如果有人有更好的解决方案，请发布！

【讨论】：