javascript - 将参数传递给没有 Controller 的指令

Question

我有一个非常基本的指令，该指令包含一个模板。在模板中有一个 color 变量来设置加载内容的背景颜色。

app.directive('percentageSquare', function(){
    return {
        restrict: 'E',
        templateUrl: '/templates/dashboard/charts/PercentageChart.html'
    };
});

有没有办法在我的指令中设置颜色？我在想也许是这样的:

<percentage-square color="red"></percentage-square>

模板看起来像这样:

<div style="background-color: {{color}}">
    <h1>I am a cool color!</h1>
</div>

正如我所寻找的那样，我所能找到的只是在 Controller 中设置的值(在指令之外)，有没有一种方法可以通过 HTML 传递一个值来做到这一点？

Answer 1

使用isolate scope .指令的 scope 属性意味着您正在绑定(bind)指令外部的一些值。或者您可以将其视为传递给指令的参数。

检查 JSFiddle 工作演示:http://jsfiddle.net/0547gjzs/1/ .

app.directive('percentageSquare', function(){
    return {
        restrict: 'E',
        scope: {
            color: '@'
        }
        templateUrl: '/templates/dashboard/charts/PercentageChart.html'
    };
});

HTML:

<percentage-square color="red"></percentage-square>