Question

在我的AngularJS application我希望我的用户能够为background-color和header选择不同的navigation，以便他们自定义他们喜欢。有点像一个非常简单的CMS。

我在应用程序中添加了一些颜色选择器Angular-color-picker，因此他们可以更轻松地选择有效颜色。

用户可以更改background-color的不同组件具有不同的Bootstrap 3.3.5 classes（在此示例中为bg-dark）。

现在我在我的$watch中使用controller生成一些css styling，其中我有不同的classes需要更改值。然后将其附加到身体上。

这是一种非常丑陋的方式，但目前它是我能够完成我想要的唯一方式。我是在寻求你的帮助和指导，看看有人能告诉我一个更好的方法吗？或者让我指出正确的方向？

标题视图

    <div id="navbar-brand" class="navbar-header {{navbarHeaderColor}}">
       <a ui-sref="lb.dashboard" class="navbar-brand text-lt">
          <img class="m-mid" ng-src="{{ organization_logo }}" alt="logo">
       </a>
       <div class="collapse navbar-collapse lb-navbar navbar-right">
           <ul class="nav navbar-nav">
               <li class="dropdown" dropdown>
                   <a href class="dropdown-toggle" dropdown-toggle>
                      User name
                   </a>
                   <ul class="dropdown-menu animated fadeInRight w p-none">
                       <li><a ui-sref="settings">Settings</a></li>
                       <li><a ui-sref="profile({user_id: user.id})">Profil</a></li>
                       <li class="divider m-t-none m-b-none"></li>
                       <li><a ng-click="logOut();">Log out</a></li>
                   </ul>
               </li>
            </ul>
        </div>
    </div>

控制器

$scope.navbarHeaderColor = 'bg-dark';

$scope.$watch('app.color', function (newValue, oldValue) {
    if (newValue) {
        var usercss =
            '#navbar-brand.bg-dark{background-color:' + newValue +' !important}' +
            '#navbar-brand.bg-dark a{' +
                'color: #FFFFFF !important' +
        '}';

        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = usercss;
        document.body.appendChild(css);
    }
}, true);

更新对不起，我完全忘了提到我也试过使用ng-style（比如'user2971994'提及）。

标题视图

    <div class="navbar-header" ng-style="{'background' : ''+ app.color.logo + ', color: ''+ app.color_text +''}">
        <a ui-sref="lb.dashboard" class="navbar-brand text-lt">
            <img class="m-mid" ng-src="{{ user.organization.logo }}" alt="{{ user.organization.name }}">
        </a>
        <div class="collapse navbar-collapse lb-navbar navbar-right">
            <ul class="nav navbar-nav">
                <li class="dropdown" dropdown>
                    <a href class="dropdown-toggle" dropdown-toggle>
                        User name
                    </a>
                    <ul class="dropdown-menu animated fadeInRight w p-none">
                        <li><a ui-sref="settings">Settings</a></li>
                        <li><a ui-sref="profile({user_id: user.id})">Profil</a></li>
                        <li class="divider m-t-none m-b-none"></li>
                        <li><a ng-click="logOut();">Log out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

在这种情况下，我遇到了内部文本的挑战，不会受到影响。虽然我已在color添加了ng-style。

Answer 1

您应该使用ng-style指令，您可以直接将范围变量的值与css样式链接。

在你的情况下：

<div id="navbar-brand" class="navbar-header" ng-style="{'background-color':app.color}">

您可以在此处阅读更多内容：https://docs.angularjs.org/api/ng/directive/ngStyle

Answer 2

您想要查看ngStyle指令。它允许您根据范围变量设置css样式值，例如：

<span ng-style="{color: app.color}"></span>

将div的颜色设置为范围变量app.color的当前值。

如何在角度中使用css类进行操作

2 个答案: