javascript - AngularJs DOM manipulation inside Directive without Jquery -

let's start right away, let's directive:

appdirectives.directive('mydirective', function () {     return{         restrict: 'a',         templateurl: 'directives/template.html',         link: function (scope, element, attr) {               // maybe element or attr access dom inside template         }     }; }); 

and template:

 <div class='col-md-12 videoholder' id="slidercontainer">     <canvas id="mycanvas"></canvas>     <div class="mylangaugesholder"></div> </div> 

normally use (but that's bad practice in angular)

document.getelementbyid('mycanvas').style.opacity = 0.6;  

my question

how access id (for example mycanvas) inside directive without jquery. tried element parameter access <div data-mydirective></div>. best practices, code examples welcome!

there plenty native dom methods. in case can use queryselector/queryselectorall:

appdirectives.directive('mydirective', function () {     return{         restrict: 'a',         templateurl: 'directives/template.html',         link: function (scope, element, attr) {             var canvas = element[0].queryselector('canvas');             canvas.style.opacity = 0.6;         }     }; }); 

also make sure don't use ids inside directive template, since directive supposed reusable. directive template better:

<div class='col-md-12 videoholder' class="slider-container">     <canvas class="my-canvas"></canvas>     <div class="my-langauges-holder"></div> </div>