我有一个放大镜，当你悬停或点击它时，它会展开成一个完整的搜索栏。我希望功能是，当搜索栏处于活动状态时，它将保持展开状态，直到单击关闭，或者如果搜索栏有值，它将保持展开状态。我有jQuery中的逻辑，但这是我第一次使用AngularJS（不是Angular），我不知道如何将这个jQuery转换为指令，或者我是否缺少一些内置功能。谢谢！

jQuery("#inpt_search").on("focus", function () {
 jQuery(this).parent("label").addClass("active");
});

jQuery("#inpt_search").on("blur", function () {
 if (jQuery(this).val().length == 0)
   jQuery(this).parent("label").removeClass("active");
});

顺晟科技：

var myApp = angular.module('myApp', []);
// set for Home Controller
myApp.controller('HomeCtrl', function($scope) {
  $scope.blueClass = function() {
      $scope.class_name = "blue";
      $scope.multi_message ="Blue Class Added";
  };
});    

<代码><；script SRC=“ https：//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js ”>；<；/script>；<；HTML（>；）<；头部>；<；link data-require=“ bootstrap-css@3.2.0 ” data-semver=“ 3.2.0 ” rel=“ stylesheet ” href=“//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/CSS/bootstrap.min.CSS ”/>；<；script data-require=“ angular.js@1.3.0-beta.5 ” data-semver=“ 1.3.0-beta.5 ” SRC=“ https：//code.angularjs.org/1.3.0-beta.5/angular.js ”>；<；/script>；<；/标题>；<；body ng-app=“我的应用程序”>；<；DIV Class=“ container ” ng-controller=“ homeCtrl ”>；<；DIV CLASS=“ alert ” ng-CLASS=“{blue：' BG-info '，red：' BG-danger '，green：' BG-SUCCESS '}[类_名称]”>；{{多_消息}}<；/DIV>；<；a CLASS=“ btn btn-info ” ng-CLICK=“ blueclass（）”>；蓝色等级<；/A>；<；/DIV>；<；/正文>；<；/HTML>；