javascript - Angular dynamically adding directive -

i want dynamically use angular-slimscroll in webpage. directive looks this:

<div id="scroll" slimscroll="{slimscrolloption: value}">     scroll content </div> 

how can dynamically add slimscroll="{slimscrolloption: value}" #scroll div , have functioning angular-slimscroll?

you can create directive, thing that:

js

angular.module('myapp',[]) .controller('myctrl', function ($scope) {}) .directive('myscroll', ['$compile', function($compile) {     return {         scope: true,         link: function(scope, element, attrs) {              element.attr('slimscroll', '{slimscrolloption: value}');              element.removeattr('my-scroll');              $compile(element)(scope);          }     }; }]); 

html

<div id="scroll" my-scroll>     scroll content </div> 

the key need $compile element again dynamically add angular-slimscroll. , removing attribute 'my-scroll' advoid infinity loop while compiling.

you can see answer here (it same case, think): how add toggling of disabled state of input via double click inside directive?