Question

我有一个指令，我想用我调用它的style属性进行自定义，如下所示：

<plant-stages style="-webkit-transform: scale(.8); border: solid blue 1px"
    stages="stages"
    affectedstages="accident.stages"
    change-page="changePage(stage)"
    title="Les étapes du cycle suceptibles d'être affectées"
    subtitle="Taper sur une des étape de la plante pour obtenir des informations détaillées"
></plant-stages>

通过传递样式属性，我希望它们适用于指令生成的HTML，就像任何标准的HTML指令一样。

部分代码段如下：

<figure class="cornStages">
    <div></div>
</figure>

指令本身如下：

app.directive('plantStages', function ($compile) {
    return {
        restrict: 'E',
        templateUrl: 'corn.figure.plant.stages.html',
        transclude: true,
        scope: { 
            stages: "=",
            affectedstages:"=",
            changePage: "&",
            title: "@",
            subtitle : "@"
        },

有什么想法吗？

Answer 1

一种选择可能是在范围的定义中添加style: '@'，然后在模板中添加ng-style="style"，将样式存储在范围内。

我在JS Fiddle上做了一个有效的例子。

代码如下：

<强> HTML

<div ng-app="myApp">
    <my-little-directive style="color: red"></my-little-directive>
    <my-little-directive style="color: blue"></my-little-directive>
    <my-little-directive style="-webkit-transform: scale(.8); border: solid blue 1px"></my-little-directive>
</div>

<强>的Javascript

angular.module('myApp',[]).directive('myLittleDirective', function() {
   return {
        restrict: 'E',
       template: '<div ng-style="style">{{style}}</div>',
        replace: true,
        scope: { 
            style : "@"
        },
};
});

如何从外部设计指令？

1 个答案: