没有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>