Question

我一般都遵循优秀的John Papa Angular V1风格指南，但我不确定在以下情况下使用的最佳模式是什么。

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

代码的一个特定部分非常昂贵，因此我使用两个画布缓冲区来绘制各种不同的阶段。各种消息来源告诉我所有＆＃34; DOM＆＃34;相关的东西应该在指令中。我理解这只是为了链接函数。现在虽然我在指令控制器中创建了两个画布。

这是他们最好的地方吗？他们还会去哪儿？它甚至重要吗？我目前的想法是创建一个Angular工厂，创建一个＆＃34; canvasBuffer＆＃34;可以这种方式使用。我唯一关心的是管理那个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：

的说明

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

我提到这一行是因为后面的link description for pre-linking。

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

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

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

1 个答案: