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