角度指令可以知道何时变得可见?

时间:2015-10-07 05:03:00

标签: javascript angularjs angularjs-directive angular-ui-router

我想做一个保持元素集中的指令。要做到这一点,我只需在focusout事件中附加一个监听器,并在第一个时调用focus()。这很好用,但是如果我转换到另一个状态并且这个指令超出范围,我不希望它继续争取焦点。

如果我做了

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

然后我可以得到通知,但我不知道正在呈现我的指令的当前状态。

2 个答案:

答案 0 :(得分:0)

我找到了解决方案。请阅读$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();
        }
      });
    },
  };
});

答案 1 :(得分:0)

使用指令的$scope的{​​{1}}事件来分离监听器。您可以在链接或控制器功能中执行此操作。

$destroy