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

Question

在我的AngularJSapplication 中，我想让我的用户能够为header 和navigation 选择不同的background-color，以便他们可以根据自己的喜好进行自定义。有点像很简单的CMS。

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

用户将能够更改的不同组件background-color 具有不同的Bootstrap 3.3.5 classes（在本例中为bg-dark）。

现在我在我的controller 中使用$watch，它会生成一些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>

在这种情况下，我面临的挑战是里面的文字不会受到影响。事件虽然我还在我的ng-style 中添加了color。

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 的当前值。