我可以通過指令的鏈接函數設置範圍屬性嗎？

我正在製作一個包含畫布的指令，我無法在所有需要的地方訪問它。我目前在指令的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 s，我不想只使用document.getElementById()。

來源

2016-02-04 Mourndark

Link功能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+中的這種類型的東西。

來源

2016-02-04 12:16:40 estus

謝謝。我沒有意識到在控制器之後發生了「連接」 - 或者確實可以將控制器傳遞給鏈接功能！ – Mourndark

我認爲你打破了你的問題中封裝的一些最佳實踐。您應該在包含畫布的指令內設置strokeStyle。您可以通過在鏈接中傳遞其他屬性和綁定來完成此操作。

在回答您的問題時，您可以將控制器作爲參數傳遞給指令。要傳遞的參數：

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

訪問你的鏈接作爲

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

來源

2016-02-04 11:46:14 brewsky

我可以通過指令的鏈接函數設置範圍屬性嗎？

回答

相關問題