从父指令角度调用指令函数

angular call directive function from parent directive

本文关键字：指令 调用 函数      更新时间：2023-09-26

我有两个指令，一个指令是带内容的工具提示，我在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');
        });
      }
    };
  })

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

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

提前谢谢你，丹尼尔。

您始终可以通过对angular中任何元素的DOM引用来访问该元素的作用域。在你的情况下，试试这个，

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

实现这一点的最佳方法是通过指令控制器。参见文档：

创建与通信的指令

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

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

相关文章：