Question

我已经设置了以下指令，以便将焦点放在添加到我页面的“最新”输入字段中。除了一个问题之外，这完美地工作。在页面加载时，选择页面上的最后一个输入。我希望在页面加载时忽略此指令，因此我可以将焦点设置为具有#new-query id的按钮。无论如何告诉这个指令只是在用户与页面交互后才开始观察范围？

'use strict';

angular.module('app')
  .directive('setFocus', setFocus);

function setFocus($timeout, $parse) {
  return {
    link: function(scope, element, attrs) {
      var model = $parse(attrs.setFocus);
      scope.$watch(model, function(value) {
        if (value) {
          $timeout(function() {
            element[0].focus();
          });
        }
      });
    }
  };
}

我如何使用此指令的示例：

<div ng-show="parameter.repeatable" ng-repeat="index in parameter.values track by $index">
  <input
    name="parameter"
    type="text"
    ng-model="parameter.values[$index]"
    set-focus="$last">
    ...

当输入通过用户操作添加到页面时，焦点会跳转到最新输入。我的问题是，只有在用户开始与输入字段交互后，才会在页面加载时执行此操作。

Answer 1

这是一个可能适用的解决方法

在控制器中：

$scope.page ={first_load: true};

指令：

function setFocus($timeout, $parse) {
  return {
    link: function(scope, element, attrs) { 
        if (!scope.page.first_load && $last) {
          $timeout(function() {
            element[0].focus();
          });
        }
         // last item of first rendering of `ng-repeat` will update controller 
         if(scope.page.first_load && $last){
            scope.page.first_load = false;
         }

      });
    }
  };
}

Answer 2

在您的控制器中

$scope.loaded = false;

在您的链接功能

中

link: function(scope, element, attrs) { 
        if (!scope.$parent.loaded) {
            scope.$parent.loaded = true;
            return;
        }

        // Do the focusing here
}

忽略页面加载时的指令

2 个答案: