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

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

1 个答案: