Question

在简化的场景中，我有两个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属性放在正文中的div上。

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

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

我知道各种黑客攻击（例如，在UI-Router的onEnter函数中访问body的DOM类属性，...），但是有一种很好的方法吗？

或完全是关于制作div[ui-view]全高（not trivial）并在此元素上设置背景以模仿应用background on the body takes up the full viewport的方式？

Answer 1

总而言之，我总结了两种方法。两者都要求 $state服务位于$rootScope 。这can be disputed的优雅，但我会寻求这个解决方案。

如果后台课程取决于仅限州，请将其添加到状态custom data：

示例代码：

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

然后，在身体上，输入ng-class并引用当前状态的数据：

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

如果背景类（除状态外）取决于其他内容（如状态参数或服务，...），请使用state's resolve mechanism：

示例代码：

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

然后，在正文上放置ng-class并通过$state.$current.locals.globals引用已解析的班级名称：

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

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

Answer 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类？

祝你好运

不同的身份背景为不同的UI路由器状态

2 个答案: