Javascript 对于不同的页面背景，正文标签上的角形标记样式？_Javascript_Css_Angularjs_Ngroute_Ng Style

Javascript 对于不同的页面背景，正文标签上的角形标记样式？

javascript css angularjs

Javascript 对于不同的页面背景，正文标签上的角形标记样式？,javascript,css,angularjs,ngroute,ng-style,Javascript,Css,Angularjs,Ngroute,Ng Style,我是angular和ngroute的新手，我尝试使用ng风格为网站的每个页面提供不同的图像背景。目前，它设置所有站点页面的背景，即使我有不同的控制器范围图像URL 我的html如下所示： <body ng-controller="mainController" ng-style="bodyStyles"> ... <div id="main"> <div ng-view></div> </body> 我最好还是用ui

我是angular和ngroute的新手，我尝试使用ng风格为网站的每个页面提供不同的图像背景。目前，它设置所有站点页面的背景，即使我有不同的控制器范围图像URL

我的html如下所示：

<body ng-controller="mainController" ng-style="bodyStyles">
...
   <div id="main">
      <div ng-view></div>
</body>

我最好还是用ui路由器来做这件事吧？

更好的策略是不要在

JavaScript

中做这件事，而是将所有样式移动到css中。您可以通过使用

$scope

变量添加类并在css中定义这些类来实现：

控制器

angVenture.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'home page';
  $scope.bodyClass = 'main-view';
});

查看

<body ng-controller="mainController" ng-class="bodyClass">

试试这个

angVenture.controller('mainController', function($scope, $location) {
      // create a message to display in our view
        var classObject = {"/home":"../images/someimage1.jpg", "/about": "../images/someimage1.jpg" };
        $scope.message = 'home page';
        $scope.imageName = classObject[$location.path()];
    });

CSS

HTML

.main-view {
  "background": "url(../images/someimage.jpg) no-repeat center center fixed", 
  "-webkit-background-size": "cover",
  "-moz-background-size": "cover",
  "-o-background-size": "cover",
  "background-size": "cover"
}

angVenture.controller('mainController', function($scope, $location) {
      // create a message to display in our view
        var classObject = {"/home":"../images/someimage1.jpg", "/about": "../images/someimage1.jpg" };
        $scope.message = 'home page';
        $scope.imageName = classObject[$location.path()];
    });

.main-view {

  "-webkit-background-size": "cover",
  "-moz-background-size": "cover",
  "-o-background-size": "cover",
  "background-size": "cover"
}

<body ng-controller="mainController" class="main-view" styel=""background": "url({{imageName}}) no-repeat center center fixed"">