模拟 :focus on elements that don't support it, via Angular.js

Question

我来自 jQuery 背景，我正在尝试使用 Angular 实现一些使用 jQuery 非常容易的效果。我试过让 Angular 和 jQuery 一起玩得很好，但这比它值得的更让人头疼。

基本上，我在 jQuery 中要做的是创建一个适用于文档中所有内容的虚拟绑定，如下所示：

$('body').on('click', '*', function() {
  $('.focus').removeClass('focus');
  $(this).addClass('focus');
  $(this).parents('*').addClass('focus');
});

这会将 focus class 从任何已有的元素中清除，然后将其设置在单击的元素及其所有父元素上，一直冒泡到元素的根节点文档。从那里我可以有选择地选择样式，就好像它有 :focus.

在Angular中有没有类似的方法可以达到同样的效果？我对这个框架还比较陌生，所以如果有某种 Angular 特定的术语，请帮我拼写出来。

Answer 1

如果您想使用 DOM 进行操作，则始终需要考虑自定义指令。在你的情况下，你可以编写一个指令来监听它所应用的元素上的冒泡点击事件，在这种情况下，将 focus class 设置为 event.target 元素。

天真的实现可能是这样的：

app.directive('focusable', function() {
    return function(scope, element) {

        var focused = element[0].getElementsByClassName('focus');

        element.on('click', function(e) {

            if (e.target !== this) {
                angular.element(this).removeClass('focus');
            }

            while (focused.length) {
                angular.element(focused[0]).removeClass('focus');
            }

            angular.element(e.target).addClass('focus');
        });
    };
});

这是我正在试验的演示：

http://plnkr.co/edit/aSupMEKsWsSYtNT2bfXp?p=info

几个笔记。我使用 getElementsByClassName 来获取实时 HTMLCollection，这非常有用，因为我不需要在添加新的 classes 后重新扫描整个 DOM，因为 focused 集合正在实时 - 自动更新。

模拟 :focus on elements that don't support it, via Angular.js

Simulating :focus on elements that don't support it, via Angular.js

events

class

parent

angularjs