Directive for dynamic background color - html

Question

I have a template with this input
<div class="form-group" LayoutDirective="">
<label>Background color for views</label>
<input type="text" name="background_color" id="background_color" ng-model="selectedLayout.background_color" class="form-control" />
</div>
and the input gets the value from the spectrum pick color with this code
<script>
$("#background_color").spectrum({
color: "#f00"
}); </script>
What I want is when I click on this button
<button class="btn btn-primary" id="saveChanges-button" ng-click="saveChanges(selectedLayout)">Save</button>
to change my background-color. I created a directive, but i don't know why doesn't work.
This is my directive:
(function() {
angular.module('routerApp').directive('LayoutDirective', function() {
$('saveChanges-button').click(function() {
var backgroundColor = $('#background_color').val();
$('body').css('background-color', backgroundColor);
});
});
})

Answer 1

Ok so what you can do here is use ng-style bind to this text scope.
<div ng-app="routerApp" ng-controller="ctrl">
<div class="form-group" ng-style="{'background-color': color}">
<label>Background color for views</label>
<input type="color" name="background_color" id="background_color" ng-model="color" class="form-control" />
</div>
</div>
And if you want to add some default color to it . Specify in controller or ng-init. whatever you like
angular.module('routerApp',[]).controller('ctrl',function($scope){
$scope.color= '#752222';
});
See fiddle here