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

Question

我一般都遵循优秀的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 ...
        }
    }
}

Answer 1

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

首先，关于控制器的说明 ：

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

我提到这一行是因为后面的链接描述中的预链接 。

在子元素链接之前执行。 由于编译器链接功能无法找到正确的链接元素，因此进行DOM转换是不安全的。

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