如何使用AngularJS定製指令

HTML代碼以顯示彈出：

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

懸停彈出是我的指令。

我曾嘗試以下

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); 
    } 
}

在徘徊「你好」，我想彈出顯示。以上兩個代碼不起作用。感謝

來源

2017-10-12 Tushar Gupta

當問一個關於由你的代碼有問題的問題，你會得到更好的答案，如果你提供的代碼的人可以用它來重現問題。請參見[如何創建最小，完整和可驗證的示例]（https://stackoverflow.com/help/mcve）。 – georgeawg

考慮使用[AngularUI團隊]（https://angular-ui.github.io/）中的[uib-tooltip]（https://angular-ui.github.io/bootstrap/#!#tooltip）指令， – georgeawg

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

來源

2017-10-12 17:02:00

嗨，謝謝，但我不想額外的div，我想插入工具提示在同一個div。 –

你需要3個「盒子」，一個用於元素（在你的例子中），一個用於工具提示（div/span ... whatever）以及它們的包裝。你稱之爲什麼並不重要 –

如何使用AngularJS定製指令

回答

相關問題