는 어떻게 지시를</p> <p>HTML 코드를 사용하여 팝업을 표시하려는 AngularJS와 사용자에게 지시

Question

를 사용하여 팝업을 표시합니다.

내가 "안녕하세요"유혹에

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