0
.my-div:before {
    content: url('/pathToMyImage/image.png.png');
    position: absolute;
}

I am using Angular JS and the image is supposed to be dynamic in nature. Lets say its path is stored in the $scope.path variable.

For example:

$scope.path="/pathToMyImage/image.png";

How do I pass the value of $scope.path to set the content dynamically?

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
Dev P
  • 118
  • 11
  • pseudo-elements are not selectable by JS as they are not part of the DOM. – Paulie_D May 13 '14 at 11:46
  • Can I use the data-* attribute to set the content dynamically,e.g.,
    And then use the data-icon value in CSS :before content url ?     – Dev P May 13 '14 at 11:53
  • TBH...I'm not sure. It might work...but you would have to try it. – Paulie_D May 13 '14 at 11:56
  • Hmm...perhaps not: http://stackoverflow.com/questions/9244197/css-content-attr-and-url-in-the-same-sentence – Paulie_D May 13 '14 at 11:58
  • Yeah..Checked it out...Wondering what harm would have been done if W3C had noticed and added support for that...:( – Dev P May 13 '14 at 12:08

1 Answers1

0

Just set the $scope.path in your controller like this..

$scope.path="/pathToMyImage/image.png";

and then access it in your html file like below..

{{path}} // for data binding

suppose the content.content_id contains the dynamic image names. Then the path 'll be

eg. <img src="https://s3.amazonaws.com/gicontent/345X195/{{content.content_id}}.png" />

Sourav
  • 29
  • 4
  • Thats just the data binding you are referring to..But, I had something else in my mind. – Dev P May 13 '14 at 13:22
  • No man, No involvement of back-end..its just the front end..Just got to know that its not supported, officially.. – Dev P May 15 '14 at 08:06
  • then its obvious, by only using front-end how that can be possible..where d dynamic path 'll come from..???!! But you can do one thing..in your controller you can create array to store the path of multiple images..here you need to hard code all those paths..and based upon some condition you can retrieve different different images in your html file..That the only way you can make it dynamic with out using any backend.. – Sourav May 15 '14 at 08:17