Angular指令set元素属性

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以及如何编写属性，但您可以这样实现(将canvas更改为button以更清楚地说明它):

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: '@'
        }
    }
});

小提琴