Question

我有一个简单的指令

app.directive('cell', function() 
{
    return {
        restrict: 'C',
        link: function(scope, element, attrs)
        {
            element.bind('click', function()
            {
                element.addClass('selected');
            });

            element.bind('blur', function()
            {
                console.log('blur');
                element.removeClass('selected');
            });
        }
    }
});

我的cell是

<div class="shift">
    <div class="cell" ng-repeat="cell in cells"></div>
</div>

click绑定正常，但blur没有绑定。它永远不会被触发！

Answer 1

仅仅因为您点击了div，这并不意味着它会获得键盘焦点。如果它没有得到键盘焦点（因为它不可编辑），它就不能丢失它，因此不能blur。

另一种方法可能如下：
单击任何.cell元素后，从包含它的每个元素中删除selected类，然后将其添加到单击的元素中。

E.g：

.directive('cell', function cellDirective($window) {
  return {
    restrict: 'C',
    link: function cellPostLink(scope, elem, attrs) {
      elem.on('click', onClick);
      scope.$on('$destroy', onDestroy);

      function onClick() {
        Array.prototype.forEach.call(
            $window.document.querySelectorAll('.selected'),
            function (el) { angular.element(el).removeClass('selected'); });
        elem.addClass('selected');
      }

      function onDestroy() {
        elem.off('click', onClick);
      });
    }
  };
});

另请参阅此 short demo 。

备注：

根据您支持的浏览器以及您是否使用jQuery，上述代码可能需要修改。

另一种方法是在文档上注册click - 侦听器，如果单击的元素是selected，则从任何元素中删除.cell类。在这种情况下，您需要注意只注册一次监听器而不是.cell的每个实例。

在scope的破坏中始终清理听众是一种好习惯，以防止内存泄漏。您可以使用scope.$on('$destroy', callback)删除在元素上注册的任何事件侦听器。

Answer 2

您可以在指令中处理子focus和blur事件：

element.children().bind('focus', function() {
  element.addClass('selected');
});

element.children().bind('blur', function() {
  console.log('blur');
  element.removeClass('selected');
});

AngularJS - 未触发模糊的绑定元素

2 个答案: