Передача обязательных аргументов в CSS

0

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

1 ответ

1
Лучший ответ

Короче, то, что вы пытаетесь сделать, невозможно, потому что элементы 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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню