Angular指令集元素屬性

Question

我有以下指令：

angular.module('app').directive("layer", function () {
    return {
        restrict: 'E',
        templateUrl: 'tpl/directive/layers.html',
        scope:{
            width: '=',
            height: '='
        }

    }
});

模板只是一個canvas ：

<canvas style="position: relative;" class=" " height="" width="" ></canvas>

現在，您可能已經猜到了，我希望將畫布的寬度和高度設置為等於<layer>元素上設置的屬性

我只是不太確定如何做到這一點？

Answer 1

<canvas style="position: relative;" class=" " height="{{height}}" width="{{width}}" ></canvas>

Answer 2

您可以使用以下代碼：

<canvas style="position: relative;" class=" " height="{{height}}" width="{{width}}" ></canvas>

Answer 3

這很大程度上取決於您如何定義HTML以及如何編寫屬性，但是您可以像這樣實現（將畫布更改為按鈕以更清楚地說明它）：

myApp.directive("layer", function () {
    return {
        restrict: 'E',
        template: '<button style="height:{{height}}px; width: {{width}}px;" class="">This is my button</button>',
        scope:{
            width: '@',
            height: '@'
        }

    }
});

小提琴