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!

Andrew · Accepted Answer · 2014-07-24 13:23:35Z

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

Rahil Wazir · Accepted Answer · 2014-07-24 13:03:02Z

6

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

edited Jul 24, 2014 at 13:03

answered Jul 24, 2014 at 12:54

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:29:50Z

0

Seems like a duplicate of How to get attribute value of a custom tag in angularjs?

I think you need something like scope: { data: "=data" } in the definition of your directive

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Jul 24, 2014 at 12:51

manuBriot

2,71516 silver badges22 bronze badges

1 Comment

user3284007 Over a year ago

Everything I see is focused on an element. I am trying to create a straight up custom attribute.

sylwester · Accepted Answer · 2014-07-24 13:06:40Z

0

Please see here :http://jsfiddle.net/MP8ch/

<div ng-app="app">
    <div ng-controller="firstCtrl">
        <div effect-color="#fc9696">
            <P>content here</P>
        </div>
    </div>
</div>

JS:

 var app = angular.module('app', []);
    app.directive('effectColor', function () {
        return {
            restrict: 'AE',
            transclude: true,
            // replace:'true',
            scope: {
                color: '@effectColor'
            },
            restrict: 'AE',
            template: '<div style="background-color:{{color}}" ng-transclude></div>'
        };
    });


    app.controller('firstCtrl', function ($scope) {


    });

answered Jul 24, 2014 at 13:06

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Comments

akonsu · Accepted Answer · 2014-07-24 13:19:05Z

0

You can create an isolate scope and bind the attribute to it:

myApp.directive('effectColor', [

function () {
    return {
        restrict: 'A',
        scope: {
            effectColor: '='
        },
        link: function (scope, element, attrs) {
            element.css({
                color: scope.effectColor
            });
        },
        controller: [
            '$scope', '$element', '$attrs', '$location',

        function ($scope, $element, $attrs, $location) {
            console.log($scope.effectColor);
        }]
    }
}]);

http://jsfiddle.net/R7Rb6/

answered Jul 24, 2014 at 13:19

akonsu

29.7k39 gold badges126 silver badges204 bronze badges

Comments

Bilal Ahmed Yaseen · Accepted Answer · 2017-11-02 10:22:35Z

0

It's a scenario of a directive with itself as the attribute. See here that how can you actually get value in your directive.

answered Nov 2, 2017 at 10:22

Bilal Ahmed Yaseen

2,6942 gold badges28 silver badges49 bronze badges

Collectives™ on Stack Overflow

Creating a custom attribute with AngularJS

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related