AngularJs Tooltip 지시문

Question

사용자가 권한이 있는지 여부에 따라 Tooltip (from AngularJs Bootstrap UI)을 표시하는 지시문을 만들려고합니다.

이 일을 잘 수행하고이 tooltip 및 tooltip-position 하지만 툴팁이를 표시하지 않는 속성을 필수 추가 할 수 있습니다.

내 코드에서 생성 된 요소와 툴팁이 일반 html 인 요소를 비교하면 class="ng-scope"을 제외하고는이 클래스를 수동으로 추가해도 도움이되지 않습니다.

proGamersApp.directive('registered', ['$rootScope', 'authService', function ($rootScope, authService) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function ($scope, element, attrs) { 
      element.addClass('faded'); 

      $rootScope.$watch('user.role', function (role) { 
       $scope.$apply(function() { 
        var accessLevel = routingConfig.accessLevels[attrs.accessLevel]; 
        if (!authService.authorize(accessLevel)) { 
         element.attr('tooltip-placement', 'bottom'); 
         element.attr('tooltip', 'Avaiable for registered users.'); 
        } else 
         element.attr('tooltip-placement', 'bottom'); 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       }); 
      }); 
     } 
    }; 
}]); 

어떤 생각의 사람 : 여기

내 지시 코드? 3

업데이트는 그것의 정의되지 않은 함수를 말한다 이후, 을 '$compile(element)을 제거하고 $ 적용 기능의 사용을 변경했습니다. 여전히 '$ digest already in progress'오류가 발생합니다.

새로운 코드 :는

proGamersApp.directive('registered', ['$rootScope', 'authService', function ($rootScope, authService, $compile) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function ($scope, element, attrs) { 
      element.addClass('faded'); 

      $rootScope.$watch('user.role', function (role) { 
       var accessLevel = routingConfig.accessLevels[attrs.accessLevel]; 
       if (!authService.authorize(accessLevel)) { 
        element.attr('tooltip-placement', 'bottom'); 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       } else { 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       } 

       $scope.$apply(element); 
      }); 

     } 
    }; 
}]); 

Answer 1

이 같은 $compile를 사용해보십시오 :

proGamersApp.directive('registered', ['$rootScope', 'authService', '$compile', 
function ($rootScope, authService, $compile) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function ($scope, element, attrs) { 
      element.addClass('faded'); 
      $rootScope.$watch('user.role', function (role) { 
       var accessLevel = routingConfig.accessLevels[attrs.accessLevel]; 
       if (!authService.authorize(accessLevel)) { 
        element.attr('tooltip-placement', 'bottom'); 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       } else { 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       } 
       $compile(element.parent().contents())($scope); 
      }); 
     } 
    }; 
}]); 

Answer 2

는 범위 액세스를 결정하는 변수 또는 함수의 단지 사용할 수 있도록 컨트롤러를 가지고하는 것입니다 이런 종류의 일을 처리 할 수있는 또 다른 방법은 다음 NG 숨기기를 사용 그리고 툴팁을 설치하기 위해 dom에있는 ng-show 등등.

<div data-ng-controller="SessionCtrl"> 
    <div data-ng-hide="session.active()"> 
     put your logged in user stuff here 
    </div> 
    <div data-ng-hide="session.active()"> 
     put your non logged in user stuff here 
    </div> 
</div>