Creating a custom attribute with AngularJS

Question

I'm new to AngularJS. I'm trying to write a directive that will set the background-color of a <div> based on some scenario. Essentially, in my view, I want to be able to write this code:

<div effect-color="#2D2F2A">content here</div>

or

<div effect-color="{{effectColor}}">content here</div>

I know I need a directive. Currently, I'm doing this:

.directive('effectColor', [
  function () {
    return {
      restrict: 'A',
      controller: [
        '$scope', '$element', '$attrs', '$location', 
        function ($scope, $element, $attrs, $location) {
          // how do I get the value of effect-color here?
        }
      ]
    }
  }
]);

I'm not sure how to get the value of the attribute itself. Do I need to add a scope? I just want the attribute value.

Thank you!

Answer 1

Here are two methods... First gets the attribute value through looking at the elements attribute value of your directive. The second gets passed the attribute value and attached to the isolated scope of your directive. Please note I have replaced your controller with a linking function. I suggest you give this article a read: https://docs.angularjs.org/guide/directive

Codepen: http://codepen.io/anon/pen/cGEex

HTML:

<div ng-app="myApp">
  <div effect-color-one="#123456"></div>
  <div effect-color-two="#123456"></div>
</div>

JavaScript:

angular.module('myApp', [])
.directive('effectColorOne', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        console.log('example 1: ' + attrs.effectColorOne);
      }
    }
  }
)
.directive('effectColorTwo', function () {
    return {
      restrict: 'A',
      scope: {
        effectColorTwo: '@'
      },
      link:function (scope) {
        console.log('example 2: ' + scope.effectColorTwo);
      }
    }
  }
);

Another example combining the above example and the ability to change the background colour of the element which the directive attribute resides is below:

Codepen: http://codepen.io/anon/pen/HospA

HTML:

<div ng-app="myApp">
  <div effect-color="red">Hello</div>
</div>

JavaScript:

angular.module('myApp', [])
.directive('effectColor', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.css('background-color', attrs.effectColor);
      }
    }
  }
);

Answer 2

You can get the value in your directive controller using $attrs parameter object

$attrs.effectColor // #2D2F2A

From the docs:

attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

Also if you are going to modify the DOM (in your case applying background color) you should use link option.

DEMO