动态背景颜色指令

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>

如果你想给它添加一些默认颜色。在controller或ng-init中指定。随你喜欢

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

请参阅此处