將綁定參數傳遞給CSS

我想知道是否有可能將參數從html傳遞給css文件。是這樣的：將綁定參數傳遞給CSS

//css 
.some-class [args]{ 
    color: $(args.color|default:'#fff') 
    height: $(args.height|default:'50px') 
} 
//html 
<body ng-app='App'> 
    <div ng-controlle="Ctrl"> 
     <div ng-class='some-class${{element}}'></div> 
    </div> 
</body> 
//js 
angular.module('App',[]) 
.controller('Ctrl',["$scope",function(){ 
    $scope.$on('EchangeColor',function(newColor){ 
     $scope.element.color = newColor 
    }) 
    $scope.$on('EchangeHeight',function(newHeight){ 
     $scope.element.height = newHeight 
    }) 
}])

來源

2015-11-29 ohadgk

總之，因爲style元素不是HTML DOM的一部分，你想做什麼是不可能的。

然而，您可以創建一個自定義指令並添加一個CSS樣式元素。

HTML：

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <style angular-style>.css_class {color: {{angularStyle}};}</style> 
    <span class="css_class">{{angularStyle}} text with AngularJS</span><br> 
    <input type="text" ng-model="angularStyle"> 
</div>

JS：

var app = angular.module('myApp', []); 

app.directive('angularStyle', function($interpolate) { 
    return function(scope, elem) { 
     var exp = $interpolate(elem.html()), 
      watchFunc = function() { return exp(scope); }; 

     scope.$watch(watchFunc, function (html) { 
      elem.html(html); 
     }); 
    }; 
}); 

app.controller('MyCtrl', function($scope) { 
    $scope.angularStyle = 'blue'; 
});

CODEPEN DEMO

來源

2015-11-29 08:46:02

將綁定參數傳遞給CSS

回答

相關問題