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

Posted 2023-03-06

技术标签:

【中文标题】不同 UI-Router 状态的不同 body 背景【英文标题】：Different body background for different UI-Router states 【发布时间】：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？

【问题讨论】：

【参考方案1】：

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

仅取决于状态

示例代码：

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

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

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

（除了状态）依赖于其他东西

示例代码：

.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;。这在答案的第一句话中提到并加粗，但没有给出示例。您可以通过此链接***.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 访问已解析的属性。所以这可能是要走的路。

以上是关于不同 UI-Router 状态的不同 body 背景的主要内容，如果未能解决你的问题，请参考以下文章

如何查看 AngularJS / UI-Router 中配置了哪些状态？

如何动态更改ui-router使用的默认状态？

如何让后退按钮与 AngularJS ui-router 状态机一起使用？

angular ui-router怎么使用

不能使用带有 ui-router AngularJS 的视图使用不同的控制器

ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？