动态背景颜色指令

Question

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

<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);
    });
});

})

Answer 1

好的，你可以在这里做的是使用 ng 样式绑定到这个文本范围。

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

如果你想给它添加一些默认颜色。在控制器或 ng-init 中指定。随便你

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

见小提琴here