순수 JS로 ng-attributes 설정

Question

짧은 시간 이후부터 각도 표시가 시작되었습니다.

여러 개의 div 및 클래스가있는 HTML이 있습니다. 내가 반복하고 해당 클래스의 div에 툴팁을 할당하려는 클래스. HTML에서 많은 코드를 회피하기 위해 동적으로 생성해야 할 필요가 있기 때문에 이러한 각도 속성을 HTML에 넣고 싶지 않습니다.

button.setAttribute ("tooltip-placement", "bottom"); 

각도를 사용하여 예를 들어

는 그것을 무시하고 배치는 표준 하나입니다 최고.

각도 속성에 대한 자체 처리 기능을 사용하려면 각도를 "설득"할 수 있습니까?

감사합니다.

DOM을 조작하는 다음 지시문은 해결 된 솔루션을 가져 오지 않습니다. DOM에 표시되고 (검사하는 경우) 각도로 무시합니다. 툴팁이 나타납니다.

demoApp.directive ('tooltipView', 기능() { 반환 { 이 제한 : 'EA',

link: function (scope, element, attrs) { 
     element.attr("tooltip-placement", scope.placement); 
     element.attr("tooltip-html-unsafe", "testtooltip"); 
     element.attr("tooltip-trigger", "mouseover"); 
    } 
}; 

})

Answer 1

요소에 속성의 변화를 처리하는 올바른 방법 링크 기능 이내에 컴파일이다 (실시 예) 다음과 같다 :

app.directive("tooltipView", function($compile) { 

return { 
    restrict: "AE", 
    link: function(scope, element, attrs) {     
     var tooltipContent = scope.tooltipHTML;  
     if (!element.attr('tooltip-html-unsafe')) { 
      element.attr("tooltip-html-unsafe", tooltipContent); 
      $compile(element[0])(scope); 
     } 
    });  
    }  
    }; 
}); 

Answer 2

나는이 모든 툴팁이 생성됩니다 경우에 따라 생각 . button.setAttribute(..) 코드를 실행하기 전에 툴팁 코드가 실행 중이면 예상되는 동작을 얻지 못합니다.

첫 번째 제안은 angular-bootstra's tooltip wrapper을 사용하고 데이터 바인딩 각을 사용하여 위치를 설정하는 것입니다.

예 : 컨트롤러와

<... tooltip-placement="{{ scopePropertyIndicatingTooltipPlacement }}" ../> 

:

function MyCtrl($scope) { 
    $scope.scopePropertyIndicatingTooltipPlacement = "right"; 
}