AngularJs DOM манипуляции внутри директивы без Jquery

Question

Начнем сразу, скажем, это моя директива:

И это мой шаблон:

<div class='col-md-12 videoholder' id="sliderContainer"> 
    <canvas id="myCanvas"></canvas> 
    <div class="myLangaugesholder"></div> 
</div> 

Обычно я хотел бы использовать (но это плохо практика в угловых)

document.getElementById('myCanvas').style.opacity = 0.6; 

мой вопрос

Как получить доступ к ID (например, myCanvas) внутри директивы без JQuery. Я попробовал его с параметром element, но потом я получил доступ только к <div data-myDirective></div>. Лучшие практики, примеры кода всегда приветствуются!

Answer 1

Есть много нативные методы DOM. В вашем случае вы можете просто использовать 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; 
     } 
    }; 
}); 

Кроме того, убедитесь не использовать идентификаторы в шаблоне директивы, так как директива должна быть повторно. Этот шаблон директива гораздо лучше:

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

Answer 2

В директиве

appDirectives.directive('myDirective', function() { 
    return{ 
     restrict: 'A', 
     templateUrl: 'directives/template.html', 
     link: function (scope, element, attr) { 
      $(element).css('opacity', '0.6'); 
     } 
    }; 
}); 

в HTML

<div class='col-md-12 videoholder' id="sliderContainer"> 
    <canvas id="myCanvas" my-directive></canvas> 
    <div class="myLangaugesholder"></div> 
</div> 

Answer 3

Вы можете использовать:

angular.element(document.querySelector('#myCanvas'));