Javascript 单击任意位置后，使用angularJs删除类

假设我有一个搜索框，我想在用户点击按钮后显示它。到目前为止还不错。
但我想添加另一项功能，当用户单击任意位置搜索框时，该功能消失。
我怎样才能用AngularJs做到这一点

这是我的代码：
HTML

  <button class="btn btn-info " ng-click="addStyle()" ><i class="fa fa-search"></i>

            Search</button>
  <input type="text"  placeholder="Type" class="{{noneStyle}} {{visibleStyle}}">

app.controller("MainCtrl", function($scope,$http){


    $scope.noneStyle = "noneVisible";
    $scope.addStyle = function(){
        $scope.noneStyle = "visibleStyle";
    }

})  

有什么想法吗？

---

Thx提前

如果需要，我建议使用ng

app.controller("MainCtrl", function($scope,$http){

   $scope.visible = true;
    $scope.changeStatus = function(){
        $scope.visible = !$scope.visible; 
    }
    $scope.hideAll= function(){
      $scope.visible=false;
    }

})

HTML

按钮

{{visible}}

看看这个

---

试试看

当用户单击其他位置时，使用

ng blur

指令更新您的模型：

<button class="btn btn-info " ng-click="addStyle()" ng-blur="removeStyle()">

---

您可以使用标准JavaScript进行操作，在显示搜索框后注册事件侦听器，并在用户单击任意位置后立即取消注册：

$scope.addStyle = function()
{
    $scope.noneStyle = "visibleStyle";

    // register event listener
    document.addEventListener("click", hideSearchBox);
}

function hideSearchBox()
{
    // set style to hide search box
    $scope.noneStyle = "noneVisible";
    // unregister event listener
    document.removeEventListener("click", hideSearchBox);
}

---

我不确定是否有一种更为通用的方法。要做到这一点，您需要在文档级别注册一些内容，因为您希望在单击任意位置时隐藏搜索框。并且“任何地方”可能不是角度根范围的注册位置。

使用ng模糊/ng焦点来实现这一点

我在这里演示了一个简单的代码

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyController'，函数（$scope）{
$scope.visible=true；
$scope.changeStatus=函数（）{
$scope.visible=！$scope.visible；
}
$scope.hideAll=函数（）{
$scope.visible=false；
}
});

单击以显示/隐藏输入框

当前可见状态：{{visible}

查看此解决方案：谢谢，我添加了它并添加了removeStyle函数，但什么都没有发生。它在我的示例中起作用，也许你的removeStyle函数做错了什么？检查该示例：是的，代码不起作用的原因是angular版本，ng focus与1.2版本一起工作谢谢，我添加了您的代码，但它不起作用
$scope.addStyle = function()
{
    $scope.noneStyle = "visibleStyle";

    // register event listener
    document.addEventListener("click", hideSearchBox);
}

function hideSearchBox()
{
    // set style to hide search box
    $scope.noneStyle = "noneVisible";
    // unregister event listener
    document.removeEventListener("click", hideSearchBox);
}