angularjs - Class directive not working when using ng-class to load the directive -
i trying load 'class' directive using ng-class. directive never loaded when that. directive multipurpose directive, , don't want create isolated scope on this. loaded when required, based on ng-class conditions hence not using attribute or element directive. has tried doing , succeeded?
this directive called using <div ng-class="someclass {{tooltip: enabled}}"></div> here enabled scope variable.
app.directive('tooltip', ['$timeout', '$location', '$rootscope', function (timer, $location, $rootscope) { return { restrict: 'c', transclude: true, link: function (scope, element) { var printcontent = function () { /* uses content of .tooltip-content if complex html tooltip, otherwise can use title attribute 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); } }; }]);
interesting issue. seems don't want use ng-class directive since doesn't recompile content after adding class. you'll want create own dynamic-class directive recompiles when value true:
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); } }); } }; }); you may need modify ability remove class , depending on if $compile sufficient or if need further manipulate html, seems right track you. made fiddle in action.
hope helps!
Comments
Post a Comment