angularjs / bootstrap：动态应用复杂的风格

Question

我正在尝试为我的网站定义颜色方案，我想看一些复杂风格对某些按钮的影响（例如）。我有以下HTML：

    <div>
        <div class="row">
            <div class="col-xs-1 text-center">&nbsp;</div>
            <div class="col-xs-2 text-center">
                <p>Primary</p>
            </div>
            <div class="col-xs-1 text-center">
                <p>%</p>
            </div>
            <div class="col-xs-2 text-center">
                <p>Gradient</p>
            </div>
            <div class="col-xs-1 text-center">
                <p>%</p>
            </div>
            <div class="col-xs-4 text-center">
                <p>Hover/Active</p>
            </div>
            <div class="col-xs-1 text-center">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-xs-1 text-center">&nbsp;</div>
            <div class="col-xs-2">
                <div class="input-group">
                    <input class="form-control" type="color" data-ng-model="colors[0]" data-ng-change="colChange()" /> <input class="form-control text-center" type="text" data-ng-model="colors[0]" data-ng-change="colChange()" />
                </div>
            </div>
            <div class="col-xs-1">
                <input class="form-control text-center" type="number" data-ng-model="colors[1]" data-ng-change="colChange()">
            </div>
            <div class="col-xs-2">
                <div class="input-group">
                    <input class="form-control" type="color" data-ng-model="colors[2]" /> <input class="form-control text-center" type="text" data-ng-model="colors[2]" />
                </div>
            </div>
            <div class="col-xs-1">
                <input class="form-control text-center" type="number" data-ng-model="colors[3]" data-ng-change="colChange()">
            </div>
            <div class="col-xs-2">
                <div class="input-group">
                    <input class="form-control" type="color" data-ng-model="colors[4]" /> <input class="form-control text-center" type="text" data-ng-model="colors[4]" />
                </div>
            </div>
            <div class="col-xs-2">
                <div class="input-group">
                    <input class="form-control" type="color" data-ng-model="colors[5]" /> <input class="form-control text-center" type="text" data-ng-model="colors[5]" />
                </div>
            </div>
            <div class="col-xs-1 text-center">&nbsp;</div>
        </div>
    </div>
    <pre>.btn-custom {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #{{colors[2].substring(1)}};
    background-image: -moz-linear-gradient(top, #{{colors[0].substring(1)}}, #{{colors[2].substring(1)}});
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#{{colors[0].substring(1)}}), to(#{{colors[2].substring(1)}}));
    background-image: -webkit-linear-gradient(top, #{{colors[0].substring(1)}}, #{{colors[2].substring(1)}});
    background-image: -o-linear-gradient(top, #{{colors[0].substring(1)}}, #{{colors[2].substring(1)}});
    background-image: linear-gradient(to bottom, #{{colors[0].substring(1)}}, #{{colors[2].substring(1)}});
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff{{colors[0].substring(1)}}', endColorstr='#ff{{colors[2].substring(1)}}', GradientType=0);
    border-color: #{{colors[2].substring(1)}} #{{colors[2].substring(1)}} #{{colors[0].substring(1)}};
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #{{colors[2].substring(1)}};
    filter: progid:DXImageTransform.Microsoft.gradient(enabled= false);
}

.btn-custom:active, .btn-custom:focus, .btn-custom:hover {
    background-image: -moz-linear-gradient(top, #{{colors[4].substring(1)}}, #{{colors[5].substring(1)}});
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#{{colors[4].substring(1)}}), to(#{{colors[5].substring(1)}}));
    background-image: -webkit-linear-gradient(top, #{{colors[4].substring(1)}}, #{{colors[5].substring(1)}});
    background-image: -o-linear-gradient(top, #{{colors[4].substring(1)}}, #{{colors[5].substring(1)}});
    background-image: linear-gradient(to bottom, #{{colors[4].substring(1)}}, #{{colors[5].substring(1)}});
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff{{colors[4].substring(1)}}', endColorstr='#ff{{colors[5].substring(1)}}', GradientType=0);
    *background-color: #{{colors[5].substring(1)}};
}

.btn-custom:active, .btn-custom:focus, .btn-custom:hover {
    color: #eee;
}

.btn-custom.disabled, .btn-custom[disabled] {
    color: #777;
}</pre>

这会生成我可以添加到CSS文件的CSS，刷新页面并查看效果。

有关信息，我的控制器有这个（其中colorLuminance（）只是一个函数，可以稍微增加提供的颜色亮度）：

// Primary, luminance%, grad end, luminance%, hover start, hover end 
$scope.colors=['#3b0084', 160, '', 130, '', ''];
$scope.colChange = function() {
    console.log("colChange()");
    $scope.colors[2] = colorLuminance( $scope.colors[0], ($scope.colors[1]/100)-1 );
    $scope.colors[4] = colorLuminance( $scope.colors[0], ($scope.colors[3]/100)-1 );
    $scope.colors[5] = colorLuminance( $scope.colors[4], ($scope.colors[1]/100)-1 );
};
$scope.colChange();

有没有办法将生成的样式应用到主页上的按钮？

我确实找到了另一个问题，指出了我：

http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview

但我无法看到如何更新它并为悬停等提供更复杂的条件内容。

我确实考虑过iframe注入一个用该样式生成的原始页面，但我[我不知道该怎么做。

任何帮助都非常感激。

修改

我尝试实现html注入，但是当我通过jQuery将文本从PRE元素中拉出来时：

style = $('pre.styleInsert').text();

我得到带有角度代码的文本：（