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

Question

我一般都关注优秀的 John Papa Angular V1风格指南，但我不确定哪种模式最适合我的以下情况。

我有一个创建 Canvas 并调用各种 Angular 服务来绘制 Canvas 的指令。

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

这是最适合他们的地方吗？他们还会或应该去哪里？这有关系吗？我目前的想法是创建一个 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 中完成的原因是因为文档中有几个与指令相关的注释。

首先，关于 controller 的注释:

The controller is instantiated before the pre-linking phase and can be accessed by other directives

我提到这一行是因为稍后在 link description for pre-linking 下的内容.

Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking.

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