Передача параметров директиве без контроллера

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 файл.

здесь ваш заказ Директива Define

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