Using angularjs template {{ }} inside css

Question

I have this jsfiddle.

https://jsfiddle.net/helpme128/rba7zqzn/

Inside the jsfiddle, the CSS looks like this;

#container {
   width : auto;
   height: 1200px;
   background:url('https://i.sstatic.net/GgZvy.jpg');
   background-repeat:no-repeat;
}

I would like to modify this jsfiddle such that the css can look more angular like;

#container {
   width : auto;
   height: 1200px;
    background:url({{backgroundURL}});
   background-repeat:no-repeat;
}

Inside the controller, there would be a line like this;

$scope.backgroundURL = 'https://i.sstatic.net/GgZvy.jpg';

How can this be done with angularjs inside css?

Hey, this might help: stackoverflow.com/questions/18248437/… — tasty_snack
– tasty_snack, Commented Oct 7, 2015 at 10:15
how about instead of using that you just add an attribute class or id. that calls for the background. — Sam Teng Wong
– Sam Teng Wong, Commented Oct 7, 2015 at 10:16
@ShiguriAnemone', could you give some code example? Sorry, I don't quite follow. — guagay_wk
– guagay_wk, Commented Oct 7, 2015 at 10:17
@maioman, sorry, I am new to web apis. would you mind providing some code sample? — guagay_wk
– guagay_wk, Commented Oct 7, 2015 at 10:34

Sam Teng Wong · Accepted Answer · 2015-10-07 10:22:34Z

2

something like this.

<div class="ng-class: expression;"></div>

here's a link for you to check: https://docs.angularjs.org/api/ng/directive/ngClass

answered Oct 7, 2015 at 10:22

Sam Teng Wong

2,4495 gold badges38 silver badges58 bronze badges

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

Comments

Raju Bera · Accepted Answer · 2015-10-07 13:31:41Z

1

You can just use the style attribute as following:

<div ng-app="test" ng-controller="testCtrl">
    <div id="container" style="background: url({{backgroundUrl}})">
        <div class="shape" ng-draggable='dragOptions' ></div>
    </div>
</div>

and set the value in your controller as following:

angular.module('test').controller('testCtrl', function($scope) { 
    $scope.backgroundUrl = 'https://i.sstatic.net/GgZvy.jpg';
 })

Check the fiddle link here https://jsfiddle.net/rba7zqzn/5/

answered Oct 7, 2015 at 13:31

Raju Bera

1,0189 silver badges14 bronze badges

Comments

ZenDD · Accepted Answer · 2015-10-07 10:36:30Z

1

This will do the trick:

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="{{backgroundURL}}">
    <p>asdfasdfasdf</p>
  </div>
</div>

CSS:

.mybg {
    background: url('https://i.sstatic.net/GgZvy.jpg');
  }

Controller:

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.backgroundURL = "mybg";
  }]);

answered Oct 7, 2015 at 10:36

ZenDD

9561 gold badge8 silver badges17 bronze badges

1 Comment

guagay_wk Over a year ago

Sorry, what I want is to have {{ }} inside the css and the contents of {{ }} taken from the controller.

Shushanth Pallegar · Accepted Answer · 2015-10-07 10:42:22Z

1

As ng-src is angular's in-built directive, you can use a custom directive which provides background for the div as below , moreover with isolate scope u can reuse the directive wherever required.

controller

 $scope.backgroundURL = 'https://i.sstatic.net/GgZvy.jpg';

template

<div background-url="backgroundURL"></div>

directive

     app.directive('backgroundUrl',function(){
          return{
              restrict:"A",// used as attribute in template
              link :function(scope,element,attrs){
                    var backgroundurl = attrs.backgroundUrl;
                    element.css('background','url(' + backgroundurl +')');
                }
          }
      })

answered Oct 7, 2015 at 10:42

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

Collectives™ on Stack Overflow

Using angularjs template {{ }} inside css

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related