Question

我是angularJS的新手，我试图为不同的网页设置不同的背景。但我有困难，因为我的观点与我的index.html中的某些元素相关联。

的index.html

<div class="top-container">
        <div class="navigation" >
            <nav>....</nav>
        </div>
        <div ui-view="topContent"></div>
</div>

ui-view为每个与nav元素绑定的页面注入新内容。我目前使用

有一个整个网站的背景

.top-container{
    background-image: url('bg.jpeg');
   }

如何改变不同页面的背景？我可以通过任何方式传递一些变量或某些东西来改变基于我所在页面的bg图像。

由于

Answer 1

我就是这样做的。首先，在每个视图上设置背景。

$stateProvider.state("home",
            {
                templateUrl: "/scripts/app/home/home.html",
                url: "/home",
                controller: 'HomeCtrl',
                data: {
                    background: 'home'
                }
            })
            .state("login",
            {
                templateUrl: "/scripts/app/login/login.html",
                url: "/login",
                controller: 'LoginCtrl',
                data: {
                    background: 'login'
                }
            });

现在抓住每个状态更改的设置并将其放在根范围内。

app.run([
    '$rootScope', function($rootScope)
    {

        $rootScope.$on('$stateChangeStart', function(event, toState)
        {
            $rootScope.background = toState.data.background;
        });
    }
]);

现在，在HTML中根据您想要的任何元素设置您的背景。请注意，这必须在您的ng-app声明中。

<body ng-class="background">

这就是Angular对你的美丽。

此外，对于每个州都有变化的事情，这是我的首选解决方案。喜欢首发的页面标题..

Answer 2

您可以使用ng-class指令

ng-class="{'class1': yourvalue == 'something' || yourvalue  == 'somethingelse'}"

Answer 3

您可以将ngStyle用于CSS类。 here 是改变颜色的演示插件。

Answer 4

也许你可以在视图改变时在.top-container div上添加新的类名。

$scope.$on('$routeChangeStart', function(next, current) { 
   ... you could trigger something here ...
});

Answer 5

您可以使用$ routeChangeStart侦听器，每次尝试切换到其他路径/视图时都会触发该侦听器。

$rootScope.$on('$routeChangeStart', function (event, next, current) {
    if(current.loadedTemplateUrl.indexOf("/call") > -1){
       // set the required background image 
    }else if(current.loadedTemplateUrl.indexOf("/login") > -1){
       // set the required background image 
    }
});

您可以使用javascript设置背景图片或 ng-class 。例如

ng-class="{'one': url == '/login'}"

注意：不要忘记为您的班级添加背景图片属性。

在angularJS中为不同视图提供不同的背景图像

5 个答案: