如何修改此指令，以便一旦输入可见，除非单击 x，否则它不会被隐藏？

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

现在，如果您单击输入之外的任何位置，则 focusMe 指令scope.$watch将触发并转动showingTagSearchInput false.

这仅需要在以下情况下发生：close x单击按钮。

Markup

<div class="sidebar" ng-controller="sidebar">

  <div class="btn-search"
       ng-hide="showingTagSearchInput"
       ng-click="quickSearchTags()">Search</div>

  <div class="search-tags-input container-fluid" ng-show="showingTagSearchInput">
      <input type="text"
             focus-me="showingTagSearchInput"
             placeholder="search for a tag"
             ng-model="tagSearchInput"
             class="form-control">
      <div>close x</div>
  </div>
</div>

控制器功能

// search button stuff:
function quickSearchTags() {
    vs.showingTagSearchInput = !vs.showingTagSearchInput;
}

function closeMe() {
    console.log('closeMe clicked');
    vs.showingTagSearchInput = false;
}

focusMe 指令：

.directive('focusMe', ['$timeout', '$parse', function($timeout, $parse) {
return {
    link: function(scope, element, attrs) {
        var model = $parse(attrs.focusMe);
        scope.$watch(model, function(value) {
            console.log('value ', value);
            console.log('element ', element);
            if (value === true) { 
                $timeout(function() {
                    element[0].focus(); 
                });
            }
        });
        element.bind('blur', function() {
            scope.$apply(model.assign(scope, false));
        })
    }
}
}])

从中删除模糊事件focusMe在模糊时隐藏 div 的指令。

而不是那个电话ng-click将设置的事件showingTagSearchInput设置为 false & 元素将被隐藏。

Markup

<input type="text"
       focus-me="showingTagSearchInput"
       placeholder="search for a tag"
       ng-model="tagSearchInput"
       class="form-control">
<div class="btn-close" ng-click="closeMe()">close x</div>

Code

$scope.hideInput = function(){
   $scope.showingTagSearchInput = false;
};

演示插件 http://plnkr.co/edit/n6ZjYdIv6QMBEmPYZlKO?p=preview