为什么我的输入焦点指令不再有效?

时间:2015-06-29 21:12:51

标签: javascript angularjs events input angularjs-directive

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

我有一个指令,假设它一旦变为可见就自动将光标聚焦到输入中。

此用法可用,但升级到Angular 1.4.1后不再使用

标记

<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>
</div>

边栏控制器

function quickSearchTags() {
    vs.showingTagSearchInput = !vs.showingTagSearchInput;
}

我的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[0].onfocus = true; 
                    });
                }
            });
            element.bind('blur', function() {
                scope.$apply(model.assign(scope, false));
            })
        }
    }
}])

1 个答案:

答案 0 :(得分:1)

您应该使用element[0].focus();代替element[0].onfocus = true;

element[0].focus()将专注于指令模板的第一个元素。

<强>代码

$timeout(function() {
    element[0].focus(); 
});

Demo Plunkr