忽略页面加载时的指令

Ignore directive on page load

本文关键字：指令 加载      更新时间：2023-09-26

我已经设置了下面的指令，将焦点放在添加到我的页面的'最新'输入字段。除了一个问题外，这种方法非常有效。在页面加载时，选择页面上的最后一个输入。我希望这个指令在页面加载时被忽略，这样我就可以将焦点设置在具有#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">
    ...

当通过用户操作将输入添加到页面时，焦点跳转到最新的输入。我的问题是，在页面加载时，这个操作是不需要的，只有在用户开始与输入字段交互之后。

这里有一个可能适合的解决方法

在控制器:

$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;
         }
      });
    }
  };
}

在你的控制器

$scope.loaded = false;

链接函数

link: function(scope, element, attrs) { 
        if (!scope.$parent.loaded) {
            scope.$parent.loaded = true;
            return;
        }
        // Do the focusing here
}
相关文章：