一个角指令能知道它什么时候变得可见吗?

Question

我想做一个指令，保持一个元素集中。要做到这一点，我只需将侦听器附加到focusout事件，并在focus()事件发生时调用它。这工作得很好，但如果我切换到另一个状态，这个指令超出了范围，我不希望它继续争夺焦点。

如果我输入

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {

然后我可以得到通知，但我不知道渲染我的指令的当前状态

Answer 1

我找到了一个解决方案。看$state.current

angular.module('constant-focus', [])
.directive('constantFocus', function($rootScope, $state) {
  // http://stackoverflow.com/questions/25879759/prevent-keyboard-from-closing/25899264#25899264
  return {
    restrict: 'A',
    scope: {
      constantFocus: '=',
    },
    link: function($scope, element) {
      const curState = $state.current;
      const focusFunction = function() {
        if (!$scope.constantFocus) {
          unregister();
          element[0].blur();
        } else {
          element[0].focus();
        }
      };
      /* jslint latedef:false */
      const unregister = () => {
        element[0].removeEventListener('focusout', focusFunction);
      };
      const register = () => {
        element[0].addEventListener('focusout', focusFunction);
      };
      $scope.$watch('constantFocus', enabled => {
        if (enabled) {
          register();
        }
        focusFunction();
      });
      $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
        if (fromState === curState) {
          unregister();
        } else if (toState === curState) {
          register();
        }
      });
    },
  };
});

Answer 2

使用指令的$scope的$destroy事件来分离监听器。您可以在链接或控制器函数中执行此操作。

$scope.$on('$destroy', function() {
  // Detach focusout listener here
});