我应该只在指令的链接 fn 中进行 DOM 操作吗？答案

【问题标题】：Should I only do DOM manipulation in the link fn of a directive?我应该只在指令的链接 fn 中进行 DOM 操作吗？
【发布时间】：2016-04-25 13:50:38
【问题描述】：

我通常遵循优秀的 John Papa Angular V1 样式指南，但我不确定哪种模式最适合我的以下情况。

我有一个指令创建一个画布，并调用各种角度服务来绘制它。

一个特定的代码部分非常昂贵，所以我使用两个画布缓冲区在不同的阶段进行绘制。各种消息来源告诉我所有与“DOM”相关的东西都应该在指令中。我理解这仅意味着链接功能。现在虽然我在指令控制器中创建了两个画布。

这是最适合他们的地方吗？他们还会或应该去哪里？这还重要吗？我目前的想法是创建一个 Angular 工厂来创建一个可以以这种方式使用的“canvasBuffer”。我唯一关心的是管理该 DOM 对象的生命周期，这再次违反了仅在指令中进行 DOM 操作的原则。

function thingyDirectiveController($scope, canvasService, drawingService, boundsService) {
    var vm = this;

    // This may want to be moved elsewhere?
    vm.imageBufferCanvas = document.createElement('canvas');
    vm.imageBufferContext = vm.imageBufferCanvas.getContext('2d');

    function draw() {

        drawingService.drawBackground(vm.context);

        // Only update if required
        if (vm.videoImage.src != vm.videoFrame) {
            vm.videoImage.src = vm.videoFrame;

            // Draw image to buffer
            vm.imageBufferContext.drawImage(vm.videoImage, 0, 0, vm.videoImage.width, vm.videoImage.height);

            // etc ...
        }
    }
}

【问题讨论】：

标签： javascript angularjs canvas

【解决方案1】：

您听到人们提到 DOM 操作是在 link 而不是 controller 中完成的原因是因为文档中有一些与指令相关的注释。

首先，关于controller：

控制器在预链接阶段之前被实例化，可以被其他指令访问

我之所以提到这一行，是因为后面的 link description for pre-linking.

在链接子元素之前执行。做 DOM 不安全转换，因为编译器链接函数将无法定位链接的正确元素。

因此，通过将这两个注释放在一起，您可以看到不建议您在控制器中进行 DOM 操作，因为由于指令可能处于的阶段，您可能会遇到元素问题。因此，最佳做法是将链接中的所有与 DOM 相关的功能，这样您就不会冒遇到这些类型问题的风险。

【讨论】：