Question

我有几个指令是彼此的孩子。他们可以走得很远。当我将鼠标悬停在其中一个指令上时，我想要一个边框。

使用：hover {}会使孩子拥有边框，但也会让父母拥有边框。

有没有一种正确/更好的方法来处理角度类似的东西？

谢谢！

Answer 1

能够选择＆amp;样式嵌套指令的特定元素，您需要有一个平均值来隔离该元素。另外，只有：hover伪类是不够的，所以绑定一些事件可以解决问题。下面是一个以这种方式工作的示例指令：

app.directive('directiveSample', function () {
    return {
        restrict: 'E',
        transclude: true,
        // Wrap content
        template: '<div class="container-directive" ng-transclude></div>',
        link: function (scope, element, attr) {

          element.bind('mouseover', function(ev) {

            ev.stopPropagation();

            var wrappers = angular.element(document.getElementsByClassName('container-directive'));
            angular.forEach(wrappers, function(value, key) {
              angular.element(value).children('span').removeClass('active-element'); 
            });

            element.children('.container-directive').children('span').addClass('active-element');

          });

        }
    }
});

完整的弹药是HERE。

angularjs儿童鼠标悬停边框

1 个答案: