Change the background Color of Div using Angular Js Directive

Question

I want to change the background color of Div with Directive.Here is my code: .

.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World',
    link: function(scope, elem, attrs) {
              elem.bind('click', function() {
              elem.html("<p>This is the new content</p>");
              elem.css("background-color", "black");
              elem.css("color", "white");
              elem.css("border", "5px solid red");
          });
      elem.bind('mouseover', function() {
      elem.css('cursor', ' ');
      });
    }
  };
});

kikerrobles · Accepted Answer · 2015-04-13 12:24:05Z

3

This works:

AngularApp.directive('ngToBlack', function() {
    return {
        restrict: 'AE',
        replace: true,
        link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                elem.css("background-color", "black");
                elem.css("color", "white");
                elem.css("border", "5px solid red");
            });
            elem.bind('mouseover', function() {
                elem.css('cursor', ' ');
            });
        }
    };
});

call it as:

<h3 ng-to-black>Change background, color and border</h3>

answered Apr 13, 2015 at 12:24

kikerrobles

2,2993 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change the background Color of Div using Angular Js Directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related