捕获ng-show事件和焦点输入字段

时间:2014-04-01 04:14:00

标签: javascript jquery angularjs

我不想写复杂的指令只是为了集中注意力。如果方法将使用纯js,则可以接受。我的问题是如何捕捉角度的ng-show。

<a ng-click="showInput=true">show</a>
<input type="text" ng-show="showInput" />

上面的代码显示了输入,如何将其集中在它的外观上?

2 个答案:

答案 0 :(得分:5)

您可以添加此指令:

app.directive('showFocus', function($timeout) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.showFocus, 
      function (newValue) { 
        $timeout(function() {
            newValue && element.focus();
        });
      },true);
  };    
});

并像这样使用它:

<input type="text" ng-show="showInput" show-focus="showInput">

答案 1 :(得分:-2)

你可以尝试使用像这样的简单指令:

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

然后,您可以在标记中使用此指令:

<input type="text" ng-show="showInput" focus-on-visibility>