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

Question

I have a very basic directive, and the directive includes a template. In the template there is a color variable to set the background color of what is loaded.

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

Is there a way for me to set the color in my directive? I was thinking maybe something like this:

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

The template would look like this:

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

As I was looking all I could find was the values set in the controller (outside of the directive), is there a way I can do this by just passing a value through the HTML?

Answer 1

Use isolate scope . The scope attribute of the directive means that you are binding some value from outside the directive. Or you can treat it as the parameters passed to the directive.

Check the JSFiddle working demo: 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

Use scope if you access color attribute of your directive.

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>"
    };
});

use same way to use templateUrl file.

here your Custom Directive Define

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