Question

我有这个jsfiddle。

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

在jsfiddle中，CSS看起来像这样;

#container {
   width : auto;
   height: 1200px;
   background:url('http://i.stack.imgur.com/GgZvy.jpg');
   background-repeat:no-repeat;
}

我想修改这个jsfiddle，使css看起来更像角度;

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

在控制器内部，会出现这样的一行;

$scope.backgroundURL = 'http://i.stack.imgur.com/GgZvy.jpg';

如何使用css内的angularjs来完成？

Answer 1

像这样的东西。

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

这里有一个链接供您检查： http://crossbar.io/iotcookbook/Raspberry-Pi/

Answer 2

这样可以解决问题：

HTML：

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

CSS：

.mybg {
    background: url('http://i.stack.imgur.com/GgZvy.jpg');
  }

控制器：

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

Answer 3

由于ng-src是angular的内置指令，你可以使用一个自定义指令，为div提供背景，如下所示，使用隔离范围你可以在任何需要的地方重用指令。

<强>控制器

 $scope.backgroundURL = 'http://i.stack.imgur.com/GgZvy.jpg';

<强>模板

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

<强>指令

     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 +')');
                }
          }
      })

Answer 4

您可以使用style属性，如下所示：

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

并在控制器中设置如下值：

angular.module('test').controller('testCtrl', function($scope) { 
    $scope.backgroundUrl = 'http://i.stack.imgur.com/GgZvy.jpg';
 })

在此处查看小提琴链接https://jsfiddle.net/rba7zqzn/5/

在css中使用angularjs模板{{}}

4 个答案: