Могу ли я установить свойство scope из функции ссылки директивы?

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 функции Link, даже если он не был выставлен на рамки с 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.

Угловой 1.5 поощряет использование component и обескураживает использование link по причинам миграции по Угловому 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'); 
    }