Question

我正在制作一个包含画布的指令，而且我在我需要的所有地方都无法访问它。我目前正在指令link中设置画布并在其上绘制一些初始元素，但我还需要在我的指令控制器中访问相同的画布来更新它。目前我的指令声明如下：

angular.module('myModule').directive('myCanvasDirective', CanvasDirective);

function CanvasDirective() {

    var linker = function (scope, element, attrs) {
        scope.vm.ctx = element[0].childNodes[0].getContext('2d');
        //do some initial drawing using scope.vm.ctx
        //this works
    }

    return {
        priority: 1001,
        restrict: 'E',
        link: linker,
        scope: {
            displayValue: '=displayValue'
        },
        template: '<canvas id="myCanvas" width="80" height="80" />',
        controller: MyCanvasController,
        controllerAs: 'vm',
        bindToController: true
    };
};

function MyCanvasController() {
    var vm = this;

    vm.draw = function () {
        vm.ctx.strokeStyle = '#808080';
        //vm.ctx is unavailable here despite being attached to scope in linker
    };

    vm.draw();
};

如何在MyCanvasController中访问我的画布上下文？由于多个ngRepeat我不希望仅使用document.getElementById()，因此该指令将在页面上多次使用。

Answer 1

链接函数got a controller instance，即使它没有在带有controllerAs的范围内公开。

function (scope, element, attrs, ctrl) {
    ctrl.ctx = element[0].childNodes[0].getContext('2d');
    ctrl.draw();
}

和

vm.ctx尽管附加到链接器
中的范围，但此处不可用

是因为控制器在link之前运行。虽然控制器have $element local dependency，所有'当DOM元素准备就绪时'逻辑should be delegated to link function。

Angular 1.5鼓励使用component并阻止使用link出现Angular 2迁移的原因。考虑使用$onInit控制器方法代替Angular 1.5 +中的这类内容。

Answer 2

我认为你在打破问题的一些最佳封装方法。您应该在包含画布的指令内设置strokeStyle。您可以通过在链接中传递其他属性和绑定来实现此目的。

在回答您的问题时，您可以将控制器作为参数传递给指令。作为参数传递：

 <my-canvas-directive vmparent="vm"></my-canvas-directive>

在您的链接中访问

linker = function (scope, element, attrs) {
      attrs.vmparent.ctx = element[0].childNodes[0].getContext('2d');
  }

我可以从指令的链接功能设置范围属性吗？

2 个答案: