javascript - 将焦点设置在输入上的指令不起作用

Question

基于这里的 stackoverflow 问题:How to set focus on input field?

我在此处的示例中使用了名为 focusSearch 的相同指令 focuseMe:http://plnkr.co/edit/tdSxya?p=preview

但是，一旦显示输入，输入不会自动获得焦点。

• 第 1 步:点击显示搜索按钮
• 第 2 步:输入内容应自动获得焦点

显示搜索

<!-- <div class="search-input container-fluid"> -->
<div class="search-input" ng-show="showingSearchInput">
    <input type="text"
           class="form-control"
           placeholder="Search"
           ng-model="vh.searchInput"
           ng-click="vh.searchPop($event)"
           focus-search="showingSearchInput">

    <div class="close-x-sml" ng-click="hideSearch()">(x)</div>
</div>

AngularJS 代码:

angular.module('app', [])

.directive('focusSearch', ['$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);
        if (value === true) { 
          $timeout(function() {
            element[0].focus();
          });
        }
      });
      // to address @blesh's comment, set attribute value to 'false'
      // on blur event:
      element.bind('blur', function() {
        console.log('blur');
        scope.$apply(model.assign(scope, false));
      });
    }
  }
}])

.controller('sidebar',
['$scope',
 '$rootScope',
 '$timeout',
 function($scope,
          $rootScope,
          $timeout) {

var vs = $scope;

$scope.clickedSearch = function() {
  vs.showingSearchInput = true;
}

$scope.hideSearch = function() {
  vs.showingSearchInput = false;
}

}]);

Answer 1

这是因为当您的指令名称为 focusSearch 时，您正在解析 focusMe 的值。将 $parse 参数更改为 attrs.focusSearch，您的指令就可以工作

var model = $parse(attrs.focusSearch);