How can I add css styles using directives?

Question

I am trying to add some css styles dynamically using directives, I tried but some where I am missing.

This is my html code:

<header-image image="{{BackgroundImage}}"></header-image>

This is my directive and controller:

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {

  $scope.BackgroundImage = "http://whatatimeline.com/covers/fb_profile_cover_13173327520f7.jpg";

});

app.directive('headerImage', function () {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'backImage.html',
    link: function (scope, elem, attr) {
      console.log("coming to directive");

      scope.backImage = attr.image;
      console.log(scope.backImage);

      elem.css({
        width: '100%',
      })

    }
  }
});

This is my backImage.html:

<div>
  <img ng-src="{{backImage}}" alt="BackImage">
</div>

When I tried like above it is adding style to entire div like below image

But I want to add style like below image using directive elem.css()

I am trying to add css style by elem.css({}), but it is appending to the div if image tag I want the style only for image tag and that too I have to style img tag from directive like when I write elem.css() then those styles have append for img tag only.

Thanks in advance.

Please have a look following link, might help you stackoverflow.com/questions/22359067/… — Front End Developer
– Front End Developer, Commented Jul 25, 2016 at 7:23

Hcetipe · Accepted Answer · 2016-07-25 07:23:36Z

2

Else you can do css like that :

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">Welcome</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
    "color" : "white",
    "background-color" : "coral",
    "font-size" : "60px",
    "padding" : "50px"
}
});
</script>
</body>

Hope help you.

answered Jul 25, 2016 at 7:23

Hcetipe

4662 silver badges10 bronze badges

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

Comments

Jai · Accepted Answer · 2016-07-25 07:20:45Z

1

You have to use .find():

  elem.find('img').css({
    width: '100%',
  });

Because elem is the directive element. So, you have to find the children element of it.

Angular does uses the built-in jQuery methods and .find() has a limitation to lookup the elements by their tagnames only.

edited Jul 25, 2016 at 7:20

answered Jul 25, 2016 at 7:18

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Midhunsai Over a year ago

if iam using "img" tag ,"h1" and "h2" in the same directive then how can i write styles using diretive like same as above @jai

Gatsbill · Accepted Answer · 2016-07-25 07:19:05Z

0

You can do:

elem.find('img').css({
    width: '100%',
  })

Or just create a css file:

tb-header-image img {
  width: 100%; 
}

You don't need to style img over and over in link function.

answered Jul 25, 2016 at 7:19

Gatsbill

1,7901 gold badge12 silver badges25 bronze badges

Comments

Mecit Semerci · Accepted Answer · 2016-07-25 07:34:34Z

0

I think you should use "ngClass" for directives.

https://docs.angularjs.org/api/ng/directive/ngClass

answered Jul 25, 2016 at 7:34

Mecit Semerci

1911 silver badge8 bronze badges

Collectives™ on Stack Overflow

How can I add css styles using directives?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest