Angularjs 角度：聚焦输入（搜索框）后如何使按钮出现？

我在一个移动应用程序中工作，我有一个搜索框，右侧有一个清除按钮，显然是为了在你决定时清除搜索框

我有一个指令，我不知道为什么不起作用：

angular.module('myApp', [])
  .directive('FocusOnVisibility', function($timeout) {
    return function (scope, element, attrs) {
              console.log(scope.showInput)
        //Watch the showInput model
        scope.$watch('showInput', function () {
            //If the model changes to true, focus on the element
            if (scope.showInput === undefined) {
                //Assumes that the element has the focus method
                //If not, then you can have your own logic to focus here
                element.focus();
            }
        });
    };
});

这是一个搜索框，里面有一个按钮，我想在聚焦输入后显示出来

    <label>
       <!--once focus this input, the button below must be shown-->
      <input type="search"
             ng-click="showInput=true
             ng-model="query">
    </label>

    <button class="button-clear" FocusOnVisibility
            ng-show="showInput"
            ng-click="query = null">
      CANCEL
    </button>

Angular具有这种开箱即用的功能：

<input ng-focus="showButton = true" ng-blur="showButton = false">
<button ng-show="showButton">wat</button>


沃特

更好地描述指令触发时发生的情况（可能是控制台日志）在这里会有所帮助，但我只能假设
元素
未定义或未在
$watch
函数的范围内。我已经修复了它，但现在离开后按钮不会消失，我只添加了：
ng click=“showInput=true”
到输入字段。查看我的更新，让我解释一下：我想要的是一个与facebook移动应用程序非常相似的搜索。好的，再次查看，是设置
showInput=true
可以触发您的功能，但您在哪里将
showInput
设置为false？