[Angularjs]我可以从一个指令链接功能设置范围属性吗?

标签: html5 AngularJS
发布时间: 2016/5/10 21:45:55
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我正在做一个指令包含一个canvas和遇到访问在我需要的所有地方。我目前设置了在指令的canvas link 和绘制一些初始元素上,但我还需要访问同一canvas在我指令控制器来更新它。此刻我的指令声明看起来像这样 ︰

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();
};

如何获取访问到在我的canvas上下文 MyCanvasController ?作为此指令要感谢几个页面上使用多次 ngRepeat s 我宁愿不只是使用 document.getElementById()

解决方法 1:

链接功能得到了一个控制器实例,即使它不暴露在与 controllerAs 的范围。

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

尽管被附加到链接器的范围 vm.ctx 是不可用

是因为控制器运行前 link 。虽然控制器$element 本地依赖,'当 DOM 元素是准备好了' 的所有逻辑应委派给 link 函数

角 1.5 鼓励使用的 component 和阻碍的用法 link 角 2 迁移原因。请考虑使用 $onInit 控制器的方法相反,这种事在角 1.5 +。

赞助商