动态背景颜色指令

时间:2015-08-05 13:05:31

标签: html angularjs dynamic background-color directive

我有一个带有此输入的模板

<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>

并且输入使用此代码

从光谱选择颜色中获取值
<script>
$("#background_color").spectrum({
    color: "#f00"
}); </script>

当我点击此按钮

时,我想要的是什么
<button class="btn btn-primary" id="saveChanges-button" ng-click="saveChanges(selectedLayout)">Save</button>

更改背景颜色。我创建了一个指令,但我不知道为什么不起作用。 这是我的指示:

(function() {
angular.module('routerApp').directive('LayoutDirective', function() {
    $('saveChanges-button').click(function() {
        var backgroundColor = $('#background_color').val();
        $('body').css('background-color', backgroundColor);
    });
});

})

1 个答案:

答案 0 :(得分:0)

好的,你可以在这里做的是使用ng-style绑定到这个文本范围。

angular.module('routerApp',[]).controller('ctrl',function($scope){
  $scope.color= '#752222';
 });

如果你想为它添加一些默认颜色。在控制器或ng-init中指定。无论你喜欢什么

{{1}}

请参阅小提琴here