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>

正如我所看到的那样，我能找到的是控制器中设置的值（在指令之外），有没有办法可以通过在HTML中传递值来实现这一点？

Answer 1

使用isolate scope。指令的scope属性意味着您绑定了指令外部的某些值。或者您可以将其视为传递给指令的parameters。

检查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>

Answer 2

如果您访问指令的颜色属性，请使用范围。

app.directive('percentageSquare', function(){
    return {
        restrict: 'E',
        scope : {
                  color : "@"
                },
        /*templateUrl: '/templates/dashboard/charts/PercentageChart.html'*/
        template : "<div style='background-color : {{color}}'><h1>I am a cool color!</h1></div>"
    };
});

使用相同的方法来使用templateUrl文件。

这里是您的自定义指令定义

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

将参数传递给没有控制器的指令

2 个答案: