2013-10-07 2 views
5

ng-class를 사용하여 'class'지시문을로드하려고합니다. 하지만 그렇게 할 때 내 지침은 절대로드되지 않습니다. 지시문은 다목적 지시어이며, 이에 대한 고립 된 범위를 만들고 싶지 않습니다. ng-class 조건에 따라 필요할 때만로드되며 따라서 attribute 또는 element 지시문을 사용하지 않습니다. 아무도이 일을 시도하고 성공 했습니까?ng-class를 사용하여 지시문을로드 할 때 클래스 지시문이 작동하지 않습니다.

<div ng-class="someClass {{tooltip: enabled}}"></div> 을 사용하여이 지시문을 호출합니다. enabled은 범위 변수입니다.

app.directive('tooltip', ['$timeout', '$location', '$rootScope', function (timer, $location, $rootScope) { 
    return { 
     restrict: 'C', 
     transclude: true, 
     link: function (scope, element) { 
      var printContent = function() { 
       /* uses the content of .tooltip-content if it is a complex html tooltip, 
        otherwise 
        you can use the title attribute for plaintext tooltips 
       */ 
       var tooltipContent = $(element).find('.tooltip-content').html(); 
       if (!tooltipContent) { 
        tooltipContent = $(element).attr('title'); 
       } 
       $(element).tooltip({ 
        content: tooltipContent, 
        items: "img, a, span, button, div", 
        tooltipClass: "tooltip", 
        position: { my: "left+30 top", at: "right top", collision: "flipfit" }, 
        show: { effect: "fadeIn", duration: "fast" }, 
        hide: { effect: "fadeOut", duration: "fast" }, 
        open: function (event, ui) { $rootScope.tooltipElement = event.target; } 
       }); 
      }; 
      timer(printContent, 0); 
     } 
    }; 
}]); 
+0

'restrict :'C''? – Cherniv

+0

세트입니다. 게시물에 대한 내 업데이트를 참조하십시오. – vaibinewbee

+0

이 구문을 시도해보십시오.'class = "someClass"ng-class = "{툴팁 : 사용}" " – Cherniv

답변

0

흥미로운 문제. ng-class 지시어는 클래스를 추가 한 후에 내용을 다시 컴파일하지 않으므로 ng-class 지시문을 사용하지 않는 것으로 보입니다. 당신은 가능성이 값에 해당하는 경우 실제로 재 컴파일 자신의 동적 클래스 지시어를 생성 할 수 있습니다 :

app.directive('dynamicClass', function($compile) { 
    return { 
     scope: { 
      dynamicClassWhen: '=', 
      dynamicClass: '=' 
     }, 
     link: function(scope, elt, attrs) { 
      scope.$watch('dynamicClassWhen', function(val) { 
       if (val) { 
        console.log(val); 
        elt.addClass(scope.dynamicClass); 
        $compile(elt)(scope); 
       } 
      }); 
     } 
    }; 
}); 

당신은 클래스를 제거 할 수있는 기능이 수정해야 할 수도 있습니다 $compile이 충분한 경우에 따라 또는 html을 추가로 조작해야 할 필요가있는 경우이 방법이 적합합니다. 나는 fiddle을 실제로 사용했다.

희망이 도움이됩니다.

+0

'ngClass'에 의한 변경시 요소를 다시 컴파일하면 Angular core IMHO에 빌드해야합니다. 이 아이디어에 감사드립니다. 덧붙여서, 나는 그것을 시도 http://stackoverflow.com/questions/22733848/angularjs-attempt-to-dynamically-apply-directive-using-ngclass-causing-weird-fu과 이상한 행동을 좀. 문제가 코드, 구현 또는 각도와 관련이 있는지 확실하지 않지만 다른 접근 방식을 취하여 더 이상 추구하지 않았습니다. – poshest

+0

흠. 글쎄, 당신이 다른 접근법을 찾았 기 때문에 기쁩니다. 제 대답은 고의적 인 경우에 효과가있는 것처럼 보입니다. 다른 질문에 당신의 바이올린은 사물의 모든 요소에 초점을 맞추어 사용하는 문제가 있습니다. 입력을 한 번 클릭하면 클래스가 추가되고, 다시 집중하면 다시 추가되고 컴파일됩니다 (지시문의 수가 증가합니다). 이러한 것들은 해결 될 수 있었지만 그 질문에 대한 대답이 받아 들여졌습니다. 이것은 여기에 맞는 것 같습니다. 네가 필요한 것이 있으면 알려줘. – hassassin

+0

우리는 다른 스레드에서이 문제에 대해 논의해야 할 것이지만 ... 예, 맞습니다. 나중에 removeClass() 비트를 추가 할 예정이며, addClass가 동일한 클래스를 두 번 추가하도록 기대하지 않았습니다. jQuery에는 없다). 귀하의 의견은 제가 else {elt.removeClass (scope.dynamicClass); }''$ compile '을'if' 외부로 옮긴다.하지만 jsFiddle을 완전히 추락시킨다. http://jsfiddle.net/ss6Y5/10/. 다른 스레드에 솔루션을 제공하려는 경우, 적어도 그것을 upvote 줄. 코드를 훨씬 잘 사용하는 패턴이 마음에 들지만 허용 된 대답을 철회하는 것이 예의인지 여부는 알 수 없습니다. – poshest