如何使用 AngularJS 自定义指令显示弹出窗口

Question

我想使用指令显示一个弹出窗口

HTML 代码：

<td hover-popup>Hi there</td>

hover-popup 是我的指令。

我试过了

link: function (scope, elm, attr, ngModel) {
    elm.attr('tooltip', 'abc');
    $compile(elm)($rootScope);
}

和

link: function (scope, el, attr, ngModel) {
    el.attr('tooltip', 'abc');
    var fn = $compile(el);
        return function(scope){
            fn(scope);
    }
}

在悬停“您好”时，我希望显示弹出窗口。 以上两个代码都不起作用。 谢谢

Answer 1

ng-transclude 可以解决问题

angular.module('transcludeExample', [])
 .directive('pane', function(){
      return {
        restrict: 'A',
        transclude: true,
        scope: { title:'@' },
        template: '<div style="border: 1px solid black;">' +
                    '<div ng-if="showTooltip" style="background-color: gray">tooltip</div>' +
                    '<ng-transclude></ng-transclude>' +
                  '</div>',
        link: function(scope, element) {
          element.bind('mouseenter', function(e) {
            scope.$apply(function() {
              scope.showTooltip = true;  
            })
          });
          element.bind('mouseleave', function(e) {
            scope.$apply(function() {
              scope.showTooltip = false;  
            })
          });

        },
      };
  });

codepen demo