Question

我有2个指令，1个指令是带有内容的工具提示，我在html的上层有另一个指令，看看我是否悬停在该元素上打开工具提示，现在我想要这个父指令，当我悬停在应用它的元素，在子指令中调用一个函数，它将检查工具提示是否有空间可以顶部或其他方面它将打开到底部。

到目前为止，我试过这个

.directive('upDown', function() {
    return function(scope, elem) {
      elem.bind('mouseenter', function() {
        scope.$broadcast('setPos');
      });
    };
  })

这是父指令，它查看我是否将鼠标悬停在一个元素上并尝试向子指令发送广播。

.directive('contentTooltip', function($window) {
    return {
      restrict: 'C',
      require: '^updown',
      link: function(scope, elem) {

        var calculatePos = function() {
          var scrollTop = this.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          var windowHeight = $window.innerHeight;
          var elementOffset = elem.offset().top;
          var elementHeight = elem[0].offsetHeight;
          console.log('scrollTop = ' + scrollTop + ' & windowHeight = ' + windowHeight + ' & elementOffset = ' + elementOffset + ' & elementHeight = ' + elementHeight);
          if (scrollTop + windowHeight < elementOffset + elementHeight) {
            elem.addClass('icon-bottom');
          }
          else {
            elem.removeClass('icon-bottom');
          }
        };

        scope.$on('setPos', function() {
          alert('abc');
        });
      }
    };
  })

这是我想接收广播的子指令，但它不起作用：（

是否有其他方法可以从父指令访问子指令？

先谢谢你，丹尼尔。

Answer 1

您始终可以通过该元素的DOM引用访问角度中任何元素的范围。在你的情况下试试这个，

angular.element(".content-tooltip").scope();

Answer 2

实现这一目标的最佳方法是通过指令控制器。请参阅文档：

Creating directives that communicate

Answer 3

最干净的方法是使用控制器。这是一个很好的解释：

https://egghead.io/lessons/angularjs-directive-communication

来自父指令的angular call指令函数

3 个答案: