我可以从指令的链接函数中设置范围属性吗？答案

【问题标题】：Can I set a scope property from a directive's link function?我可以从指令的链接函数中设置范围属性吗？
【发布时间】：2016-05-13 23:48:57
【问题描述】：

我正在制作一个包含画布的指令，但在我需要的所有地方都无法访问它。我目前正在指令的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 中访问我的画布上下文？由于多个ngRepeats，该指令将在页面上多次使用，因此我不想只使用document.getElementById()。

【问题讨论】：

标签： angularjs html canvas angularjs-directive angularjs-scope

【解决方案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 迁移的原因。考虑在 Angular 1.5+ 中使用 $onInit 控制器方法代替这种事情。

【讨论】：

谢谢。我没有意识到 link 发生在控制器之后 - 或者实际上您可以将控制器传递给链接函数！

【解决方案2】：

我认为你在你的问题中打破了一些封装的最佳实践。您应该在包含画布的指令内设置strokeStyle。您可以通过在链接中传递额外的属性和绑定来做到这一点。

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

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

在您的链接中访问为

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

【讨论】：