AngularJS如何根据元素激活、悬浮或含值状态增删类并转换jQuery逻辑

基础功能实现（对应你原有jQuery逻辑） #

你可以直接用AngularJS内置的指令完成原有逻辑，无需手动操作DOM：

模板代码 #

<div ng-app="searchApp" ng-controller="SearchCtrl">
  <label ng-class="{'active': isSearchActive || searchQuery.length > 0}">
    <input 
      id="inpt_search" 
      type="text" 
      ng-model="searchQuery"
      ng-focus="isSearchActive = true"
      ng-blur="isSearchActive = false"
      placeholder="搜索内容"
    >
  </label>
</div>

控制器代码 #

angular.module('searchApp', [])
.controller('SearchCtrl', ['$scope', function($scope) {
  // 搜索框激活状态标记
  $scope.isSearchActive = false;
  // 搜索框输入内容绑定
  $scope.searchQuery = '';
}]);

逻辑说明：通过ng-class动态控制active类的添加，只要搜索框处于激活状态、或者输入框有内容，就会保留active类保持展开，完全匹配你原有jQuery的实现效果。

点击外部区域收起功能实现 #

如果需要实现点击搜索框外部区域自动收起的逻辑，可以新增一个自定义全局点击监听指令：

自定义指令代码 #

angular.module('searchApp')
.directive('clickOutside', ['$document', function($document) {
  return {
    restrict: 'A',
    scope: {
      clickOutside: '&' // 绑定外部触发的回调函数
    },
    link: function(scope, element) {
      // 监听全局文档点击事件
      const documentClickHandler = function(event) {
        // 判断点击区域是否不在当前组件内部
        if (!element[0].contains(event.target)) {
          scope.$apply(scope.clickOutside);
        }
      };
      $document.on('click', documentClickHandler);
      // 指令销毁时移除事件监听，避免内存泄漏
      scope.$on('$destroy', function() {
        $document.off('click', documentClickHandler);
      });
    }
  };
}]);

更新模板代码 #

给外层label添加click-outside指令：

<label 
  ng-class="{'active': isSearchActive || searchQuery.length > 0}"
  click-outside="handleOutsideClick()"
>

更新控制器代码 #

添加外部点击的回调逻辑：

// 新增外部点击处理方法
$scope.handleOutsideClick = function() {
  // 仅当搜索框无内容时才收起
  if ($scope.searchQuery.length === 0) {
    $scope.isSearchActive = false;
  }
};

注意事项 #

AngularJS设计思路是状态驱动视图，尽量不要直接用jQuery操作DOM，通过内置指令和双向绑定管理状态变更，后续维护成本更低。

内容的提问来源于stack exchange，提问作者ashryan125