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

【问题标题】：Using angularjs template {{ }} inside css在 css 中使用 angularjs 模板 {{ }}
【发布时间】：2016-01-04 12:38:58
【问题描述】：

我有这个 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 来完成？

【问题讨论】：

嘿，这可能会有所帮助：stackoverflow.com/questions/18248437/…
如何不使用它，您只需添加一个属性类或 id。这需要背景。
@ShiguriAnemone'，你能举一些代码例子吗？抱歉，我不太明白。
你可以直接定位 elem.style.background
@maioman，对不起，我是网络 API 的新手。您介意提供一些代码示例吗？

标签： javascript html css angularjs angularjs-scope

【解决方案1】：

类似的东西。

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

这里有一个链接供您检查： https://docs.angularjs.org/api/ng/directive/ngClass

【讨论】：

【解决方案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";
  }]);

【讨论】：

抱歉，我想要的是在 css 中包含 {{ }} 以及从控制器中获取的 {{ }} 的内容。

【解决方案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 +')');
                }
          }
      })

【讨论】：

【解决方案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/

【讨论】：