不同 UI-Router 状态的不同 body 背景答案

【问题标题】：Different body background for different UI-Router states不同 UI-Router 状态的不同 body 背景
【发布时间】：2015-10-11 03:22:34
【问题描述】：

在一个简化的场景中，我有两个 UI-Router 状态，并希望它们具有不同的主体背景颜色。

理想情况下，我想做以下事情：

<body ng-class="background" ui-view>
</body>

然后在控制器中为状态设置背景类（可能是动态的，意思是：在控制器中计算）：

stateHelperProvider
    .state({
        name: 'a',
        url: '/a',
        templateUrl: 'views/a.html',
        controller: function ($scope) {
            $scope.background = 'bg1';
        }
    })
    .state({
        name: 'b',
        url: '/b',
        templateUrl: 'views/b.html',
        controller: function ($scope) {
            $scope.background = 'bg2';
        }
    });

但是将ui-view 属性放在主体上会删除它。所以我必须把ui-view属性放在body里面的一个div上。

<body>
    <div ui-view></div>
</body>

我现在如何控制身体背景？

我知道各种 hack（例如，在 UI-Router 的 onEnter 函数中访问 body 的类 DOM 属性，...），但是有没有好的方法呢？

或者这一切都是为了让div[ui-view] 全高（即not trivial）并在这个元素上设置背景以模仿如何应用background on the body takes up the full viewport？

【问题讨论】：

标签： css angularjs angular-ui-router

【解决方案1】：

所以总结一下我的学习，有两种方法可以做到这一点。两者都要求$state 服务位于$rootScope。这个can be disputed 的优雅，但我会选择这个解决方案。

如果背景类仅取决于状态，请将它们添加到状态的custom data：

示例代码：

.state({
    ...,
    data: {
        bodyClass: 'bg1'
    }
});

然后，在 body 上，放一个 ng-class 并引用当前状态的数据：

<body ng-class="$state.current.data.bodyClass">

如果背景类（除了状态）依赖于其他东西（如状态参数或服务，...），请使用state's resolve mechanism：

示例代码：

.state({
    ...,
    resolve: {
        bodyClass: function($stateParams) {
            // do some calculation
            return ...
        }
    }
});

然后，在body上放一个ng-class，并通过$state.$current.locals.globals引用解析的类名：

<body ng-class="$state.$current.locals.globals.bodyClass">

在这两种情况下，bodyClass 可以是对ng-class directive 有效的任何内容。

【讨论】：

顺便说一句。 The Angular UI-Router title plugin 用于更新页面标题 something similar
这对我有用！ -- 只想指出，为了让它工作，当你声明你的模块时，你必须从.run 内部运行$rootScope.$state = $state;。这在答案的第一句话中提到并加粗，但没有给出示例。您可以通过此链接stackoverflow.com/questions/18572930/… 找到示例代码，该链接也在答案中提供

【解决方案2】：

可能不准确，但也许您可以直接在控制器中更改您的身体背景颜色吗？

stateHelperProvider
    .state({
        name: 'a',
        url: '/a',
        templateUrl: 'views/a.html',
        controller: function ($scope) {
            document.body.style.background = 'bg1';
        }
    })
    .state({
        name: 'b',
        url: '/b',
        templateUrl: 'views/b.html',
        controller: function ($scope) {
            document.body.style.background = 'bg2';
        }
    });

或者在这种情况下只是向正文添加/删除 CSS 类？

祝你好运

【讨论】：

那行得通，而且上课可能没问题。问题是，如果我的状态 c 没有背景，则前一个状态的背景将保留。我当然可以在示波器上收听$destroy，但这又不是很优雅。
主体上带有“ngStyle”的控制器怎么样？它可以获得页面值并根据页面名称的条件更改背景？可能又不是很准确，但希望能有所帮助。
我可以将背景类设置为custom data property of the state，然后执行以下操作：<body ng-class="$state.current.data.backgroundClass"> 和$state 在$rootScope 上。不完全是您提出的建议，但受到它的启发。
我想过类似的事情，但它甚至更好。 :)
我刚刚意识到我实际上需要动态计算每个状态的背景 CSS 类，这意味着它需要在控制器或解析中。正如this answer 的详细信息，有一种方法可以从$state 访问已解析的属性。所以这可能是要走的路。