我应该只在指令的链接 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 相关的函数放在链接中，这样您就不会冒遇到这些类型问题的风险。