CODEWITHSUNDEEP
javascriptcssangularjs
user3284007
user3284007

Reputation: 1717

Creating a custom attribute with AngularJS

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!

Upvotes: 3

Views: 13513

Answers (6)

Bilal Ahmed Yaseen
Bilal Ahmed Yaseen

Reputation: 2654

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

Upvotes: 0

Andrew
Andrew

Reputation: 5715

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

Upvotes: 7

akonsu
akonsu

Reputation: 29536

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/

Upvotes: 0

sylwester
sylwester

Reputation: 16498

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) {


    });

Upvotes: 0

Rahil Wazir
Rahil Wazir

Reputation: 10132

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

Upvotes: 6

manuBriot
manuBriot

Reputation: 2715

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

Upvotes: 0

Related Questions