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

based on some scenario. Essentially, in my view, I want to be able to writ

Solution 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:

<divng-app="myApp"><diveffect-color-one="#123456"></div><diveffect-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:

<divng-app="myApp"><diveffect-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);
      }
    }
  }
);

Solution 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

Solution 3:

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

Solution 4:

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

<divng-app="app"><divng-controller="firstCtrl"><diveffect-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) {


    });

Solution 5:

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/

javascript edu