javascript - AngularJS - 绑定(bind)元素以模糊未触发

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

我的手机是

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

click 可以很好地绑定(bind)，但是 blur 不能。它永远不会被触发!

Answer 1

仅仅因为您点击了一个 div，并不意味着它获得了键盘焦点。如果它没有获得键盘焦点(因为它不可编辑)，它就不会丢失它，因此也不会模糊。

替代方法如下:
单击任何 .cell 元素后，从每个包含它的元素中删除 selected 类，然后将其添加到被单击的元素。

例如:

.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 .

---

注意事项:

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

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

3. 最好始终在 scope 销毁时清理您的监听器，以防止内存泄漏。您可以使用 scope.$on('$destroy', callback) 删除在元素上注册的任何事件监听器。