Мне было интересно, есть ли возможность передать аргументы из html в файл 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
})
}])
Короче, то, что вы пытаетесь сделать, невозможно, потому что элементы 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';
});