沒有Jquery的指令中的AngularJs DOM操作

Question

讓我們立即開始，假設這是我的指令：

appDirectives.directive('myDirective', function () {
    return{
        restrict: 'A',
        templateUrl: 'directives/template.html',
        link: function (scope, element, attr) {
              // maybe by element or attr access to the dom inside the template
        }
    };
});

這是我的模板：

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

通常我會用（但這在Angular中是不好的做法）

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

我的問題

我如何在沒有Jquery的指令中訪問ID（例如myCanvas）。 我嘗試使用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;
        }
    };
});

還要確保您不要在指令模板中使用id，因為指令應該是可重用的。 該指令模板更好：

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

Answer 2

您可以使用：

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

Answer 3

在指令中

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>