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

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来完成呢？

来源

2015-10-07 user781486

嘿，这可能帮助：HTTP：//计算器。 com/questions/18248437/bind-angularjs-variables-into-css-syntax –

怎么样，而不是使用你只是添加一个属性类或ID。这需要背景。 –

@ShiguriAnemone'，你能给一些代码示例吗？对不起，我不太理解。 – user781486

您可以只使用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/

来源

2015-10-07 13:31:41

这样的事情。

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

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

来源

2015-10-07 10:22:34

这将这样的伎俩：

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"; 
    }]);

来源

2015-10-07 10:36:30 ZenDD

对不起，我想要的是将{{}}放入css中，并从控制器获取{{}}的内容。 – user781486

由于ng-src是角度的内置指令，您可以使用自定义指令，这对于下面的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 +')'); 
       } 
      } 
     })

来源

2015-10-07 10:42:22

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

回答

相关问题